@dssp/dkpi 1.0.0-alpha.80 → 1.0.0-alpha.81

package/dist-client/pages/project-complete-tabs/pc-tab4-monthly.js

@@ -4,28 +4,48 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { client } from '@operato/graphql';
 import { gql } from '@apollo/client';
 import { notify } from '@operato/layout';
+import { OxPrompt } from '@operato/popup';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
 import moment from 'moment-timezone';
-const DATASET_ID = 'fd4092f5-11d0-488a-bbe8-21d2793e1e79';
-// 월별 수집 대상 항목 (Dataset의 dataItems tag 기준)
-const MONTHLY_ITEMS = [
-    { tag: 'planned_progress', name: '계획공정율', unit: '%', type: 'number' },
-    { tag: 'actual_progress', name: '실적공정율', unit: '%', type: 'number' },
-    { tag: 'schedule_deviation', name: '일정 이탈 수준', unit: '', type: 'rating' },
-    { tag: 'schedule_assessment', name: '일정성과 수준 평가', unit: '', type: 'rating' },
-    { tag: 'cost_assessment', name: '비용성과 수준 평가', unit: '', type: 'rating' },
-    { tag: 'quality_assessment', name: '품질성과 수준 평가', unit: '', type: 'rating' },
-    { tag: 'safety_assessment', name: '안전성과 수준 평가', unit: '', type: 'rating' },
-    { tag: 'environment_assessment', name: '환경성과 수준 평가', unit: '', type: 'rating' },
-    { tag: 'productivity_assessment', name: '생산성성과 수준 평가', unit: '', type: 'rating' }
-];
+import { tenantHeaders } from '@dssp/project/dist-client/shared/domain-context';
+/**
+ * 프로젝트 완공 처리 탭 4 — 월별 KPI 데이터 그리드.
+ *
+ * 데이터 source = `KpiMetric` (periodType=MONTH) + `KpiMetricValue` (그 metric 의
+ * 월별 값들). 이전 버전 (DataSet/DataSample) 폐기. KpiMetricValue 의 unique
+ * 인덱스 (domain, metric, valueDate, org) 가 (도메인, 프로젝트, 메트릭, 월) 단일 row
+ * 정책을 보장.
+ *
+ * 단방향 흐름:
+ *   - 탭1/탭2 의 metric 저장 (valueDate=YYYY-MM-01) → 그 월 row 가 여기 자동 노출
+ *   - 여기서 cell 수정 → 그 metric × 그 월 row 만 update (탭1/탭2 의 "현재값" 영향 없음 —
+ *     탭1/탭2 는 KpiMetricValueProvider 가 latest 또는 valueDate-based lookup 으로 동작)
+ */
+/** rating 셀렉트로 표시할 metric 인지 판단 — 이름에 '평가' 또는 '이탈' 포함되면 1~5 rating. */
+function isRating(metricName) {
+    return /평가|이탈/.test(metricName || '');
+}
 let SvProjectCompleteTab4Monthly = class SvProjectCompleteTab4Monthly extends LitElement {
     constructor() {
         super(...arguments);
         this.project = {};
-        // monthRows: { workDate: 'YYYY-MM', data: {tag: value}, sampleId?: string, dirty: boolean }[]
+        /** 월별 metric 목록 (periodType=MONTH). KpiMetric admin 에 등록된 것 기준. */
+        this.monthlyMetrics = [];
+        /** monthRows: { workDate:'YYYY-MM', values:{[metricId]:value}, originalValues, dirty }[] */
         this.monthRows = [];
         this.addYear = new Date().getFullYear();
         this.addMonth = new Date().getMonth() + 1;
+        /** kpi:input — Step4 월별 데이터 저장 권한 (cumulative 와 같은 권한) */
+        this.canSave = false;
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        this.canSave = await hasPrivilege({
+            category: 'kpi',
+            privilege: 'input',
+            domainOwnerGranted: true,
+            superUserGranted: true
+        });
     }
     render() {
         const years = this._getYearRange();
@@ -36,7 +56,10 @@ let SvProjectCompleteTab4Monthly = class SvProjectCompleteTab4Monthly extends Li
       </div>
 
       <div class="toolbar">
-        <select .value=${String(this.addYear)} @change=${(e) => (this.addYear = Number(e.target.value))}>
+        <select
+          .value=${String(this.addYear)}
+          @change=${(e) => (this.addYear = Number(e.target.value))}
+        >
           ${years.map(y => html `<option value=${y} ?selected=${y === this.addYear}>${y}년</option>`)}
         </select>
         <select
@@ -48,68 +71,90 @@ let SvProjectCompleteTab4Monthly = class SvProjectCompleteTab4Monthly extends Li
         <div class="add-btn" @click=${this._addMonth}>+ 월 추가</div>
       </div>
 
-      ${this.monthRows.length === 0
-            ? html `<div class="empty-msg">등록된 월별 데이터가 없습니다. 위에서 월을 추가해주세요.</div>`
-            : html `
-            <div class="grid-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>월</th>
-                    ${MONTHLY_ITEMS.map(item => html `<th>${item.name}${item.unit ? ` (${item.unit})` : ''}</th>`)}
-                    <th>상태</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  ${this.monthRows.map((row, rowIdx) => html `
-                      <tr>
-                        <td class="month-cell ${this._isCurrentMonth(row.workDate) ? 'current' : ''}">${row.workDate}</td>
-                        ${MONTHLY_ITEMS.map(item => {
-                var _a, _b;
-                return item.type === 'rating'
-                    ? html `
-                                <td>
-                                  <select
-                                    class="rating-select"
-                                    .value=${String((_a = row.data[item.tag]) !== null && _a !== void 0 ? _a : '')}
-                                    @change=${(e) => this._onCellChange(rowIdx, item.tag, e.target.value)}
-                                  >
-                                    <option value="">-</option>
-                                    ${[1, 2, 3, 4, 5].map(v => html `<option value=${v} ?selected=${Number(row.data[item.tag]) === v}>${v}</option>`)}
-                                  </select>
-                                </td>
-                              `
-                    : html `
-                                <td>
-                                  <input
-                                    type="number"
-                                    .value=${(_b = row.data[item.tag]) !== null && _b !== void 0 ? _b : ''}
-                                    @input=${(e) => this._onCellChange(rowIdx, item.tag, e.target.value)}
-                                  />
-                                </td>
-                              `;
-            })}
-                        <td>
-                          ${row.sampleId
-                ? row.dirty
+      ${this.monthlyMetrics.length === 0
+            ? html `<div class="empty-msg">
+            월별 metric (periodType=MONTH) 이 등록되어 있지 않습니다. KPI 관리자에서 먼저 등록해주세요.
+          </div>`
+            : this.monthRows.length === 0
+                ? html `<div class="empty-msg">등록된 월별 데이터가 없습니다. 위에서 월을 추가해주세요.</div>`
+                : html `
+              <div class="grid-wrapper">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>월</th>
+                      ${this.monthlyMetrics.map(m => html `
+                          <th class=${this._isMetricNeverEntered(m.id) ? 'pending' : ''}
+                              title=${this._isMetricNeverEntered(m.id) ? '한 번도 입력된 적 없는 metric' : ''}>
+                            ${m.name}${m.unit ? ` (${m.unit})` : ''}
+                          </th>
+                        `)}
+                      <th>상태</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    ${this.monthRows.map((row, rowIdx) => html `
+                        <tr>
+                          <td class="month-cell ${this._isCurrentMonth(row.workDate) ? 'current' : ''}">
+                            ${row.workDate}
+                          </td>
+                          ${this.monthlyMetrics.map(m => {
+                    var _a, _b;
+                    const pending = this._isCellPending(row, m.id);
+                    return isRating(m.name)
+                        ? html `
+                                  <td class=${pending ? 'pending' : ''}>
+                                    <select
+                                      class="rating-select"
+                                      .value=${String((_a = row.values[m.id]) !== null && _a !== void 0 ? _a : '')}
+                                      @change=${(e) => this._onCellChange(rowIdx, m.id, e.target.value)}
+                                    >
+                                      <option value="">-</option>
+                                      ${[1, 2, 3, 4, 5].map(v => html `<option value=${v} ?selected=${Number(row.values[m.id]) === v}>
+                                            ${v}
+                                          </option>`)}
+                                    </select>
+                                  </td>
+                                `
+                        : html `
+                                  <td class=${pending ? 'pending' : ''}>
+                                    <input
+                                      type="number"
+                                      .value=${(_b = row.values[m.id]) !== null && _b !== void 0 ? _b : ''}
+                                      @input=${(e) => this._onCellChange(rowIdx, m.id, e.target.value)}
+                                    />
+                                  </td>
+                                `;
+                })}
+                          <td>
+                            ${row.dirty
                     ? html `<span class="status-unsaved">수정됨</span>`
-                    : html `<span class="status-saved">저장됨</span>`
-                : html `<span class="status-new">신규</span>`}
-                        </td>
-                        <td>
-                          <span class="delete-btn" title="삭제" @click=${() => this._removeMonth(rowIdx)}>✕</span>
-                        </td>
-                      </tr>
-                    `)}
-                </tbody>
-              </table>
-            </div>
-          `}
+                    : row.isAuto
+                        ? html `<span class="status-pending">미입력</span>`
+                        : row.isNew
+                            ? html `<span class="status-new">신규</span>`
+                            : html `<span class="status-saved">저장됨</span>`}
+                          </td>
+                          <td>
+                            <span class="delete-btn" title="삭제" @click=${() => this._removeMonth(rowIdx)}>✕</span>
+                          </td>
+                        </tr>
+                      `)}
+                  </tbody>
+                </table>
+              </div>
+            `}
 
       <div class="button-line">
         <div class="ghost-btn" @click=${this._reset}>초기화</div>
-        <div class="ghost-btn secondary" @click=${this._save}>저장</div>
+        <div
+          class="ghost-btn secondary ${this.canSave ? '' : 'disabled'}"
+          title=${this.canSave ? '' : 'kpi:input 권한 필요'}
+          @click=${() => this.canSave && this._save()}
+        >
+          저장
+        </div>
       </div>
     `;
     }
@@ -122,7 +167,9 @@ let SvProjectCompleteTab4Monthly = class SvProjectCompleteTab4Monthly extends Li
     }
     _getYearRange() {
         var _a, _b;
-        const startYear = ((_a = this.project) === null || _a === void 0 ? void 0 : _a.startDate) ? new Date(this.project.startDate).getFullYear() : new Date().getFullYear() - 2;
+        const startYear = ((_a = this.project) === null || _a === void 0 ? void 0 : _a.startDate)
+            ? new Date(this.project.startDate).getFullYear()
+            : new Date().getFullYear() - 2;
         const endYear = ((_b = this.project) === null || _b === void 0 ? void 0 : _b.endDate)
             ? new Date(this.project.endDate).getFullYear() + 1
             : new Date().getFullYear() + 1;
@@ -134,130 +181,262 @@ let SvProjectCompleteTab4Monthly = class SvProjectCompleteTab4Monthly extends Li
     _isCurrentMonth(workDate) {
         return workDate === moment().tz('Asia/Seoul').format('YYYY-MM');
     }
+    /**
+     * 월별 metric 정의 + 그 프로젝트의 월별 KpiMetricValue 들을 조회해 그리드 row 구성.
+     *
+     *   1) KpiMetric where periodType=MONTH → monthlyMetrics
+     *   2) KpiMetricValue where org=projectId → 월별로 그룹핑하여 monthRows
+     */
     async _loadData() {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f;
         try {
-            const response = await client.query({
+            // 1) 월별 metric 목록
+            const metricsResp = await client.query({
                 query: gql `
-          query DataSamplesByDataSet($dataSetId: String!, $filters: [Filter!], $sortings: [Sorting!], $pagination: Pagination) {
-            dataSamplesByDataSet(dataSetId: $dataSetId, filters: $filters, sortings: $sortings, pagination: $pagination) {
+          query KpiMetrics {
+            kpiMetrics {
               items {
                 id
-                data
-                workDate
-                key01
+                name
+                unit
+                periodType
               }
-              total
             }
           }
         `,
-                variables: {
-                    dataSetId: DATASET_ID,
-                    filters: [{ name: 'key01', operator: 'eq', value: this.project.id }],
-                    sortings: [{ name: 'workDate', desc: false }],
-                    pagination: { page: 1, limit: 120 }
-                }
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
             });
-            const items = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.dataSamplesByDataSet) === null || _b === void 0 ? void 0 : _b.items) || [];
-            this.monthRows = items.map((sample) => {
-                var _a;
-                return ({
-                    workDate: ((_a = sample.workDate) === null || _a === void 0 ? void 0 : _a.substring(0, 7)) || '', // YYYY-MM
-                    data: sample.data || {},
-                    sampleId: sample.id,
-                    dirty: false
-                });
+            const all = ((_c = (_b = metricsResp.data) === null || _b === void 0 ? void 0 : _b.kpiMetrics) === null || _c === void 0 ? void 0 : _c.items) || [];
+            this.monthlyMetrics = all.filter((m) => m.periodType === 'MONTH');
+            if (this.monthlyMetrics.length === 0) {
+                this.monthRows = [];
+                return;
+            }
+            // 2) 프로젝트의 KpiMetricValue 들 (org=projectId). 월별 metric 만 client 측에서 필터.
+            const monthlyMetricIds = new Set(this.monthlyMetrics.map((m) => m.id));
+            const valuesResp = await client.query({
+                query: gql `
+          query KpiMetricValues($filters: [Filter!]) {
+            kpiMetricValues(filters: $filters) {
+              items {
+                id
+                value
+                unit
+                periodType
+                valueDate
+                metricId
+              }
+            }
+          }
+        `,
+                variables: { filters: [{ name: 'org', operator: 'eq', value: this.project.id }] },
+                context: { headers: tenantHeaders((_d = this.project) === null || _d === void 0 ? void 0 : _d.code) }
             });
+            const allValues = ((_f = (_e = valuesResp.data) === null || _e === void 0 ? void 0 : _e.kpiMetricValues) === null || _f === void 0 ? void 0 : _f.items) || [];
+            // periodType='MONTH' 만 그리드에 — 비월별 row 가 valueDate prefix 로 잘못 묶이지 않도록.
+            const monthlyValues = allValues.filter((v) => monthlyMetricIds.has(v.metricId) && v.periodType === 'MONTH');
+            // 월별 그룹핑 — valueDate YYYY-MM-DD 의 앞 7자리. id 도 보존 (삭제 시 사용).
+            // 현재월(=this month) row 는 운영 원칙상 표시 대상 아님 → 아예 bucket 제외.
+            const currentYm = moment().tz('Asia/Seoul').format('YYYY-MM');
+            const byMonth = new Map();
+            for (const v of monthlyValues) {
+                const ym = (v.valueDate || '').slice(0, 7);
+                if (!ym)
+                    continue;
+                if (ym === currentYm)
+                    continue; // 현재월 record 무시 (DB 에 우연히 있더라도)
+                if (!byMonth.has(ym))
+                    byMonth.set(ym, { workDate: ym, values: {}, originalValues: {}, valueIds: {}, dirty: false });
+                const row = byMonth.get(ym);
+                row.values[v.metricId] = v.value;
+                row.originalValues[v.metricId] = v.value;
+                row.valueIds[v.metricId] = v.id;
+            }
+            // project.startDate ~ 현재월 사이 누락된 월 placeholder row 자동 추가.
+            // 사용자가 값을 입력하지 않으면 dirty 가 안 되므로 저장 시 무시되어 spurious patch 없음.
+            for (const ym of this._generateExpectedMonths()) {
+                if (!byMonth.has(ym)) {
+                    byMonth.set(ym, {
+                        workDate: ym,
+                        values: {},
+                        originalValues: {},
+                        valueIds: {},
+                        dirty: false,
+                        isAuto: true
+                    });
+                }
+            }
+            this.monthRows = Array.from(byMonth.values()).sort((a, b) => b.workDate.localeCompare(a.workDate));
         }
         catch (e) {
             console.error('Failed to load monthly data:', e);
             this.monthRows = [];
         }
     }
+    /** project.startDate (YYYY-MM) ~ **전월** (YYYY-MM) 까지 매월 문자열 배열.
+     *  현재월은 의도적으로 제외 — 운영 원칙상 "이번달 데이터는 아직 입력 대상이 아님". */
+    _generateExpectedMonths() {
+        var _a;
+        const startStr = (((_a = this.project) === null || _a === void 0 ? void 0 : _a.startDate) || '').slice(0, 7);
+        if (!startStr || !/^\d{4}-\d{2}$/.test(startStr))
+            return [];
+        const tz = 'Asia/Seoul';
+        let cur = moment.tz(startStr, 'YYYY-MM', tz);
+        const end = moment.tz(moment().tz(tz).subtract(1, 'month').format('YYYY-MM'), 'YYYY-MM', tz);
+        if (!cur.isValid() || cur.isAfter(end))
+            return [];
+        const months = [];
+        while (cur.isSameOrBefore(end)) {
+            months.push(cur.format('YYYY-MM'));
+            cur = cur.add(1, 'month');
+        }
+        return months;
+    }
+    /** 셀 미입력 여부 — 값 없음 AND 그 월이 **전월** (직전 한 달) 인 경우만 pending.
+     *  과월 전체가 아니라 전월 한 달에 한해서만 강조 — 사용자 입력 흐름(이번 달에 지난달 데이터)과 일치. */
+    _isCellPending(row, metricId) {
+        var _a;
+        const v = (_a = row.values) === null || _a === void 0 ? void 0 : _a[metricId];
+        if (v !== undefined && v !== null && v !== '')
+            return false;
+        const lastMonth = moment().tz('Asia/Seoul').subtract(1, 'month').format('YYYY-MM');
+        return row.workDate === lastMonth;
+    }
+    /** metric 컬럼이 전 row 통틀어 한 번도 값이 없으면 헤더 강조. */
+    _isMetricNeverEntered(metricId) {
+        return !this.monthRows.some(r => {
+            var _a;
+            const v = (_a = r.values) === null || _a === void 0 ? void 0 : _a[metricId];
+            return v !== undefined && v !== null && v !== '';
+        });
+    }
     _addMonth() {
         const workDate = `${this.addYear}-${String(this.addMonth).padStart(2, '0')}`;
-        // 중복 체크
+        // 현재월 row 는 추가 금지 — 운영 원칙상 이번달 데이터는 입력 대상 아님.
+        const currentYm = moment().tz('Asia/Seoul').format('YYYY-MM');
+        if (workDate === currentYm) {
+            notify({ message: '현재월(이번 달) 데이터는 입력 대상이 아닙니다.' });
+            return;
+        }
+        // 미래월도 차단
+        if (workDate > currentYm) {
+            notify({ message: '미래월은 입력 대상이 아닙니다.' });
+            return;
+        }
         if (this.monthRows.some(r => r.workDate === workDate)) {
             notify({ message: `${workDate}은 이미 존재합니다.` });
             return;
         }
-        const newRow = {
-            workDate,
-            data: {},
-            sampleId: null,
-            dirty: true
-        };
-        // 정렬된 위치에 삽입
+        const newRow = { workDate, values: {}, originalValues: {}, valueIds: {}, dirty: true, isNew: true };
         const rows = [...this.monthRows, newRow];
-        rows.sort((a, b) => a.workDate.localeCompare(b.workDate));
+        rows.sort((a, b) => b.workDate.localeCompare(a.workDate));
         this.monthRows = rows;
     }
-    _removeMonth(rowIdx) {
-        this.monthRows = this.monthRows.filter((_, i) => i !== rowIdx);
+    async _removeMonth(rowIdx) {
+        var _a;
+        const row = this.monthRows[rowIdx];
+        // 신규 row (DB 미반영) — 메모리에서만 제거
+        if (row.isNew) {
+            this.monthRows = this.monthRows.filter((_, i) => i !== rowIdx);
+            return;
+        }
+        // 저장된 row — 그 월의 모든 KpiMetricValue id 들을 한 번에 삭제.
+        // 권한: things-factory 의 deleteKpiMetricValues 는 category="kpi", privilege="mutation"
+        // (superUser/도메인 owner 자동 통과, 일반 사용자는 별도 grant 필요).
+        const ids = Object.values(row.valueIds || {}).filter(Boolean);
+        if (ids.length === 0) {
+            this.monthRows = this.monthRows.filter((_, i) => i !== rowIdx);
+            return;
+        }
+        const ok = await OxPrompt.open({
+            title: `${row.workDate} 의 월별 데이터를 삭제하시겠습니까?`,
+            confirmButton: { text: '삭제' },
+            cancelButton: { text: '취소' }
+        });
+        if (!ok)
+            return;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation DeleteKpiMetricValues($ids: [String!]!) {
+            deleteKpiMetricValues(ids: $ids)
+          }
+        `,
+                variables: { ids },
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            if (response.errors) {
+                throw new Error(response.errors.map((e) => e.message).join('\n'));
+            }
+            notify({ message: `${row.workDate} 월별 데이터 ${ids.length}건 삭제되었습니다.` });
+            await this._loadData();
+        }
+        catch (e) {
+            console.error('Failed to delete monthly values:', e);
+            notify({ message: '삭제 중 오류가 발생했습니다. 권한을 확인해주세요.' });
+        }
     }
-    _onCellChange(rowIdx, tag, rawValue) {
+    _onCellChange(rowIdx, metricId, rawValue) {
         const value = rawValue === '' ? null : Number(rawValue);
         this.monthRows = this.monthRows.map((row, i) => {
             if (i !== rowIdx)
                 return row;
-            return Object.assign(Object.assign({}, row), { data: Object.assign(Object.assign({}, row.data), { [tag]: value }), dirty: true });
+            return Object.assign(Object.assign({}, row), { values: Object.assign(Object.assign({}, row.values), { [metricId]: value }), dirty: true });
         });
     }
+    /**
+     * 저장 — dirty row 들 안의 변경된 cell 들을 KpiMetricValuePatch 로 모아
+     * updateKpiMetricValuesCumulative 한 번 호출 (backend upsert 가 unique 조합 처리).
+     */
     async _save() {
-        const dirtyRows = this.monthRows.filter(r => r.dirty);
-        if (dirtyRows.length === 0) {
+        var _a;
+        const patches = [];
+        for (const row of this.monthRows) {
+            if (!row.dirty)
+                continue;
+            for (const m of this.monthlyMetrics) {
+                const value = row.values[m.id];
+                const original = row.originalValues[m.id];
+                if (value === undefined || value === null)
+                    continue; // 빈 값은 skip (기존 유지)
+                if (value === original)
+                    continue; // 변화 없으면 skip
+                patches.push({
+                    metricId: m.id,
+                    value,
+                    unit: m.unit || '',
+                    org: this.project.id,
+                    periodType: 'MONTH',
+                    valueDate: `${row.workDate}-01`
+                });
+            }
+        }
+        if (patches.length === 0) {
             notify({ message: '변경된 데이터가 없습니다.' });
             return;
         }
-        let savedCount = 0;
-        let errorCount = 0;
-        for (const row of dirtyRows) {
-            try {
-                // data에 project_id 포함 (DataKeySet이 key01에 매핑)
-                const data = Object.assign(Object.assign({}, row.data), { project_id: this.project.id });
-                // null 값 제거
-                for (const key of Object.keys(data)) {
-                    if (data[key] === null || data[key] === undefined)
-                        delete data[key];
-                }
-                // collectedAt을 월 시작일 고정으로 설정 → 동일 key01+collectedAt이면 기존 레코드 업데이트
-                const collectedAt = new Date(`${row.workDate}-01T00:00:00Z`);
-                await client.mutate({
-                    mutation: gql `
-            mutation CreateDataSample($dataSample: NewDataSample!) {
-              createDataSample(dataSample: $dataSample) {
-                id
-                data
-                workDate
-                key01
-              }
-            }
-          `,
-                    variables: {
-                        dataSample: {
-                            dataSet: { id: DATASET_ID },
-                            data,
-                            workDate: `${row.workDate}-01`,
-                            collectedAt: collectedAt.toISOString(),
-                            source: 'project-complete'
-                        }
-                    }
-                });
-                savedCount++;
+        try {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation UpdateKpiMetricValuesCumulative($patches: [KpiMetricValuePatch!]!) {
+            updateKpiMetricValuesCumulative(patches: $patches) {
+              id
             }
-            catch (e) {
-                console.error(`Failed to save ${row.workDate}:`, e);
-                errorCount++;
+          }
+        `,
+                variables: { patches },
+                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
+            });
+            if (response.errors) {
+                throw new Error(response.errors.map((e) => e.message).join('\n'));
             }
+            notify({ message: `${patches.length}건 저장되었습니다.` });
+            await this._loadData();
         }
-        if (errorCount > 0) {
-            notify({ message: `${savedCount}건 저장, ${errorCount}건 오류 발생` });
-        }
-        else {
-            notify({ message: `${savedCount}건 저장되었습니다.` });
+        catch (e) {
+            console.error('Failed to save monthly values:', e);
+            notify({ message: '저장 중 오류가 발생했습니다.' });
         }
-        // 저장 후 다시 로드하여 sampleId 갱신
-        await this._loadData();
     }
     _reset() {
         this._loadData();
@@ -372,6 +551,23 @@ SvProjectCompleteTab4Monthly.styles = [
         color: #3498db;
         font-size: 12px;
       }
+      .status-pending {
+        color: #e74c3c;
+        font-size: 12px;
+        font-weight: 600;
+      }
+
+      /* 미입력 셀 — 과월/현재월 row 에서 값이 비어있을 때 강조 */
+      td.pending input[type='number'],
+      td.pending .rating-select {
+        border-color: #e74c3c;
+        background-color: #fff5f5;
+      }
+      /* 한 번도 입력된 적 없는 metric 컬럼 — 헤더 강조 */
+      th.pending {
+        background: #fdecec;
+        color: #c0392b;
+      }
 
       .button-line {
         display: flex;
@@ -392,6 +588,10 @@ SvProjectCompleteTab4Monthly.styles = [
       .ghost-btn.secondary {
         background: #24be7b;
       }
+      .ghost-btn.disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+      }
 
       .delete-btn {
         cursor: pointer;
@@ -414,6 +614,10 @@ __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], SvProjectCompleteTab4Monthly.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], SvProjectCompleteTab4Monthly.prototype, "monthlyMetrics", void 0);
 __decorate([
     state(),
     __metadata("design:type", Array)
@@ -426,6 +630,10 @@ __decorate([
     state(),
     __metadata("design:type", Number)
 ], SvProjectCompleteTab4Monthly.prototype, "addMonth", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab4Monthly.prototype, "canSave", void 0);
 SvProjectCompleteTab4Monthly = __decorate([
     customElement('sv-pc-tab4-monthly')
 ], SvProjectCompleteTab4Monthly);