@dssp/dkpi 1.0.0-y.0 → 1.0.1

package/dist-client/pages/project-complete-tabs/pc-tab1-plan.js

@@ -1,33 +1,59 @@
+var SvProjectCompleteTab1Plan_1;
 import { __decorate, __metadata } from "tslib";
 import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { calcDiff, calcDateDiff } from '../../shared/func';
-import { getKpiMetricValues, getKpiMetrics, updateProjectCompleteStep1 } from '../../shared/complete-api';
+import { customElement, property, state } from 'lit/decorators.js';
+import { calcDateDiff } from '../../shared/func';
+import { getKpiMetricValues, getKpiMetrics, updateProjectCompleteStep1, collectProjectExternalData } from '../../shared/complete-api';
+import { INTEGRATION_SOURCES } from '../../shared/integration-fetch';
+import { syncKpiToProjectInfo } from '../../shared/kpi-project-sync';
 import moment from 'moment-timezone';
 import { notify } from '@operato/layout';
+import { hasPrivilege } from '@things-factory/auth-base/dist-client';
 const KPI_METRIC_KEY_MAPPING = [
     { label: '공사기간', projectKey: 'constructionPeriod' },
     { label: '총 근로자수', projectKey: 'totalWorkerCount' },
     { label: '연간 근로자 수', projectKey: 'annualWorkerCount' },
-    { label: '투입인력', projectKey: 'workerCount' },
+    { label: '총 투입인력(M/M)', projectKey: 'workerCount' },
     { label: '재해 건수', projectKey: 'accidentCount' },
     { label: '일정 이탈 수준', projectKey: 'scheduleDeviationLevel' },
     { label: '총 건설 폐기물 발생량', projectKey: 'totalConstructionWasteAmount' },
-    { label: '용적율', projectKey: 'floorAreaRatio' },
+    { label: '용적률', projectKey: 'floorAreaRatio' },
     { label: '총 설계 변경 건', projectKey: 'designChangeCount' },
-    { label: '공사비', projectKey: 'constructionCost' },
+    { label: '계획공사비', projectKey: 'constructionCost' },
     { label: '연면적', projectKey: 'area' },
     { label: '지상층수', projectKey: 'upperFloorCount' },
     { label: '지하층수', projectKey: 'lowerFloorCount' }
 ];
-let SvProjectCompleteTab1Plan = class SvProjectCompleteTab1Plan extends LitElement {
+// 계획값이 없는 것들 (실제값으로 표시할 필드)
+const NO_PLAN_FIELDS = ['workerCount', 'area', 'floorAreaRatio', 'designChangeCount', 'upperFloorCount', 'lowerFloorCount'];
+let SvProjectCompleteTab1Plan = SvProjectCompleteTab1Plan_1 = class SvProjectCompleteTab1Plan extends LitElement {
     constructor() {
         super(...arguments);
         this.kpiMetricValues = [];
         this.kpiMetrics = [];
         this.project = {};
+        /** 연동 진행 상태: source → 'idle' | 'collecting' | 'done' */
+        this.collectStatus = {};
+        this.collectError = {};
+        /** 자동 수집한 실제값의 출처: metricId → 시스템 라벨 */
+        this.valueSources = {};
+        /** 자동 수집한 계획값: projectKey → 값 (키스콘이 제공하는 계획공사기간/계획공사비) */
+        this.collectedPlan = {};
+        /** 계획값 출처: projectKey → 시스템 라벨 */
+        this.planSources = {};
+        /** 시스템별 수집 요약 (카드 표시용): 라벨 → [{label, text}] */
+        this.collectedSummary = {};
+        /** 방금 채워진 셀 강조용 (metricId 또는 plan:projectKey) */
+        this.justFilled = {};
+        this.collecting = false;
+        /** kpi:input — Step1 계획값 입력/저장 권한 */
+        this.canSave = false;
+        /** kpi:auto-collect — 외부 시스템 자동 수집 권한 */
+        this.canAutoCollect = false;
     }
     render() {
+        // 전월 (last month) YYYY-MM. 월별 metric 의 "전월 데이터 입력" 검사 기준.
+        const lastMonth = moment().tz('Asia/Seoul').subtract(1, 'month').format('YYYY-MM');
         return html `
       <div class="title">
         <div>
@@ -37,47 +63,279 @@ let SvProjectCompleteTab1Plan = class SvProjectCompleteTab1Plan extends LitEleme
         </div>
       </div>
 
-      <div class="rows">
-        <div class="row header">
-          <div class="header-label">기본정보</div>
-          <div class="header-label">계획</div>
-          <div class="header-label">실제</div>
-          <div class="header-label">편차</div>
-        </div>
+      ${this._renderCollectPanel()}
 
-        ${this.kpiMetrics.map(metric => {
-            var _a, _b, _c;
-            // 상수로 정의된 매핑 정보에서 metric.name으로 projectKey를 찾음
-            const projectKey = ((_a = KPI_METRIC_KEY_MAPPING.find(item => item.label === metric.name)) === null || _a === void 0 ? void 0 : _a.projectKey) || '';
-            const kpiMetricValue = this.kpiMetricValues.find((item) => item.metricId === metric.id) || {};
-            // planValue는 project에서 찾고 없으면 buildingComplex의 값에서 찾음
-            let planValue = this.project[projectKey] || ((_c = (_b = this.project) === null || _b === void 0 ? void 0 : _b.buildingComplex) === null || _c === void 0 ? void 0 : _c[projectKey]) || 0;
-            // 공사기간은 기간을 일 단위로 계산
-            if (projectKey === 'constructionPeriod') {
-                planValue = calcDateDiff(this.project.startDate, this.project.endDate);
-            }
-            const diffValue = calcDiff(planValue, kpiMetricValue.value);
-            const diffClass = diffValue === 0 ? '' : diffValue > 0 ? 'plus' : 'minus';
-            const diffSign = diffValue === 0 ? '' : diffValue > 0 ? '+' : '-';
-            const unit = kpiMetricValue.unit || metric.unit || '';
-            return html `<div class="row">
-            <div class="label">• ${metric.name}</div>
-            <div class="cell"><input .value=${planValue} disabled /> ${unit}</div>
-            <div class="cell">
-              <input numeric .value=${kpiMetricValue.value || 0} @input=${(e) => this._onInputChange(e, metric)} />
-              ${unit}
-            </div>
-            <div class="unit ${diffClass}">${diffSign} ${Math.abs(diffValue).toLocaleString()} ${unit}</div>
-          </div>`;
-        })}
+      <div class="rows">
+        ${this._renderSection('기본정보', this.kpiMetrics.filter((m) => m.periodType !== 'MONTH'), lastMonth)}
+        ${
+        // '월별 데이터' 섹션 당분간 숨김. 복원하려면 아래 주석을 해제하고 이 '' 를 제거.
+        // this._renderSection('월별 데이터', this.kpiMetrics.filter((m: any) => m.periodType === 'MONTH'), lastMonth, true)
+        ''}
 
         <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>
       </div>
     `;
     }
+    /** '기본정보' / '월별 데이터' 섹션 렌더. 해당 그룹에 metric 이 없으면 섹션 자체를 생략. */
+    _renderSection(title, metrics, lastMonth, topGap = false) {
+        if (!metrics.length)
+            return '';
+        return html `
+      <div class="row header ${topGap ? 'section-gap' : ''}">
+        <div class="header-label">${title}</div>
+        <div class="header-label">값</div>
+        <div class="header-label">설명</div>
+      </div>
+      ${metrics.map(metric => this._renderMetricRow(metric, lastMonth))}
+    `;
+    }
+    _renderMetricRow(metric, lastMonth) {
+        var _a, _b, _c, _d;
+        // 상수로 정의된 매핑 정보에서 metric.name으로 projectKey를 찾음
+        const projectKey = ((_a = KPI_METRIC_KEY_MAPPING.find(item => item.label === metric.name)) === null || _a === void 0 ? void 0 : _a.projectKey) || '';
+        const isMonthly = metric.periodType === 'MONTH';
+        // 현재값 lookup:
+        //   MONTH   → 전월 row (단일 진실원)
+        //   ALLTIME → 단일 ALLTIME row
+        //   그 외    → metricId+periodType 매칭
+        const kpiMetricValue = isMonthly
+            ? this.kpiMetricValues.find((item) => item.metricId === metric.id && item.periodType === 'MONTH' && (item.valueDate || '').startsWith(lastMonth)) || {}
+            : this.kpiMetricValues.find((item) => item.metricId === metric.id && item.periodType === metric.periodType) || {};
+        const isDisplayInput = projectKey === 'constructionPeriod' || projectKey === 'constructionCost'; // 유효한 계획 필드
+        // planValue는 project에서 찾고 없으면 buildingComplex의 값에서 찾음
+        const basePlanValue = this.project[projectKey] || ((_c = (_b = this.project) === null || _b === void 0 ? void 0 : _b.buildingComplex) === null || _c === void 0 ? void 0 : _c[projectKey]) || 0;
+        let planValue = basePlanValue;
+        const unit = kpiMetricValue.unit || metric.unit || '';
+        // 2. 계획 값 처리
+        // 공사기간은 기간을 일 단위로 계산
+        if (projectKey === 'constructionPeriod') {
+            planValue = Math.ceil(calcDateDiff(this.project.startDate, this.project.endDate) / 30);
+        }
+        else if (!isDisplayInput) {
+            planValue = 0;
+        }
+        // 1. 실제 값 처리 kpi값을 찾고, 없으면 (NO_PLAN_FIELDS에 해당하는 필드는 원래 계획값 사용)
+        const actualValue = (_d = kpiMetricValue.value) !== null && _d !== void 0 ? _d : (NO_PLAN_FIELDS.includes(projectKey) ? basePlanValue : 0);
+        const src = this.valueSources[metric.id];
+        // periodType 무관하게 값 없으면 pending. 메시지는 MONTH 만 "전월 데이터 입력 필요".
+        const isPending = kpiMetricValue.value === undefined || kpiMetricValue.value === null;
+        return html `<div class="row">
+      <div
+        class="label ${isPending ? 'pending' : ''}"
+        title=${isPending ? (isMonthly ? '전월 데이터 입력 필요' : '아직 입력되지 않은 항목') : ''}
+      >
+        ${metric.name}
+      </div>
+      <div class="cell ${this.justFilled[metric.id] ? 'just-filled' : ''} ${isPending ? 'pending' : ''}">
+        <input numeric .value=${actualValue !== null && actualValue !== void 0 ? actualValue : 0} @input=${(e) => this._onInputChange(e, metric)} />
+        ${unit} ${src ? html `<span class="src-chip">🔗 ${src}</span>` : ''}
+      </div>
+      <div class="desc">${metric.description || ''}</div>
+    </div>`;
+    }
+    _renderCollectPanel() {
+        return html `
+      <div class="collect-panel">
+        <div class="collect-head">
+          <div class="ttl">시스템 연동 자동 수집 <small>외부 시스템에서 기본정보를 가져옵니다</small></div>
+          <div
+            class="collect-btn ${this.canAutoCollect ? '' : 'disabled'}"
+            ?disabled=${this.collecting}
+            title=${this.canAutoCollect ? '' : 'kpi:auto-collect 권한 필요'}
+            @click=${() => (this.canAutoCollect && !this.collecting ? this._autoCollect() : null)}
+          >
+            ${this.collecting ? '수집 중…' : '⟳ 자동 수집'}
+          </div>
+        </div>
+        <div class="source-list">
+          ${INTEGRATION_SOURCES.map(meta => {
+            const status = this.collectStatus[meta.source] || 'idle';
+            const errMsg = this.collectError[meta.source];
+            // 카드 안의 수집 필드 summary — 실제/계획 무관 collectedSummary 기준으로 통일.
+            // (valueSources 만 보면 키스콘처럼 계획값만 채우는 시스템은 표시 안 됨)
+            const collectedFields = this._collectedFieldsOf(meta.label);
+            const statusText = status === 'collecting' ? '연동 중…' : status === 'done' ? '완료 ✓' : status === 'error' ? '정보 없음 ⓘ' : '대기';
+            return html `
+              <div class="source-card ${status}">
+                <div class="sc-head">
+                  <span class="sys-icon">${meta.icon}</span>
+                  <span>${meta.label}</span>
+                  <span class="sc-status ${status}">${statusText}</span>
+                </div>
+                <div class="sc-desc">${meta.desc}</div>
+                ${status === 'error' && errMsg ? html `<div class="sc-error-msg">${errMsg}</div>` : ''}
+                ${status === 'done' && collectedFields.length
+                ? html `<div class="sc-fields">
+                        ${collectedFields.map(f => html `<div class="sc-field"><span>${f.label}</span><b>${f.text}</b></div>`)}
+                      </div>`
+                : ''}
+              </div>
+            `;
+        })}
+        </div>
+      </div>
+    `;
+    }
+    /** 패널 카드에 표시할, 해당 시스템에서 수집한 값 요약 */
+    _collectedFieldsOf(sourceLabel) {
+        return this.collectedSummary[sourceLabel] || [];
+    }
+    /** 자동 수집 — 백엔드의 collectProjectExternalData mutation 1번 호출.
+     *  서버가 시나리오 3종 (세움터/올바로/키스콘) 을 순차 실행하고 시스템별 ok/메시지를 반환.
+     *  성공/실패와 무관하게 시나리오 step 이 KPI Value 를 DB 에 적재하므로 호출 후
+     *  KPI Metric Values 를 재조회해 form 을 자동 갱신.
+     *
+     *  운영 현실: 키스콘·올바로는 시공사 자격증명 미확보가 많아 오류 빈도 높음.
+     *  세움터는 공공데이터 서비스키만으로 동작 가능. 시스템별로 카드에 독립 표시.
+     */
+    async _autoCollect() {
+        var _a;
+        if (!((_a = this.project) === null || _a === void 0 ? void 0 : _a.id)) {
+            notify({ message: '프로젝트 정보가 없습니다.' });
+            return;
+        }
+        this.collecting = true;
+        this.collectStatus = {};
+        this.collectError = {};
+        this.collectedSummary = {};
+        this.collectedPlan = {};
+        this.planSources = {};
+        this.valueSources = {};
+        // 모든 카드를 collecting 상태로 표시
+        const collecting = {};
+        for (const meta of INTEGRATION_SOURCES)
+            collecting[meta.source] = 'collecting';
+        this.collectStatus = collecting;
+        try {
+            const results = await collectProjectExternalData(this.project.id);
+            // 시스템별 status / error 메시지 업데이트 + result data 를 form 에 매핑
+            const status = {};
+            const errors = {};
+            for (const r of results) {
+                status[r.source] = r.ok ? 'done' : 'error';
+                if (!r.ok) {
+                    errors[r.source] = r.message;
+                    continue;
+                }
+                // 시나리오 result 객체 = { projectKey: value, ... }.
+                // KPI_METRIC_KEY_MAPPING 매칭 키 → form 채움. 미매칭 키 (siteType,
+                // structureType 등 프로젝트/BuildingComplex 기본 속성) → 카드 요약만.
+                const summary = [];
+                // KPI_METRIC_KEY_MAPPING 에 없는 키들의 한글 라벨. BuildingComplex/Project 직접 속성용.
+                const NON_KPI_LABEL = {
+                    siteType: '건축프로젝트유형',
+                    structureType: '구조형태',
+                    coverageRatio: '건폐율',
+                    householdCount: '세대수',
+                    buildingCount: '동수',
+                    startDate: '착공일',
+                    endDate: '준공일',
+                    permitDate: '건축허가일',
+                    bldNm: '건물명'
+                };
+                for (const [projectKey, rawValue] of Object.entries(r.data || {})) {
+                    if (rawValue === null || rawValue === undefined || rawValue === '')
+                        continue;
+                    // 비-primitive (객체/배열) 값은 시나리오 측 return 형태 오류 — form 매핑/표시
+                    // 모두 skip 하고 console 에 진단 로그만 남김. 흔한 원인은 시나리오 마지막 step 이
+                    // `return { result: { ... } }` 처럼 wrap 한 케이스.
+                    if (typeof rawValue === 'object') {
+                        console.warn(`[자동수집] '${r.label}'.${projectKey} 가 object — 시나리오 return 형태 점검`, rawValue);
+                        continue;
+                    }
+                    const mapping = KPI_METRIC_KEY_MAPPING.find(x => x.projectKey === projectKey);
+                    const label = (mapping === null || mapping === void 0 ? void 0 : mapping.label) || NON_KPI_LABEL[projectKey] || projectKey;
+                    const isPlan = SvProjectCompleteTab1Plan_1.PLAN_KEYS.includes(projectKey);
+                    // summary 카드 표시용 — string 값은 그대로, number 는 toLocaleString
+                    const numericValue = typeof rawValue === 'number' ? rawValue : Number(rawValue);
+                    const isNumeric = Number.isFinite(numericValue) && typeof rawValue !== 'string';
+                    const valueText = isNumeric ? numericValue.toLocaleString() : String(rawValue);
+                    summary.push({ label, text: valueText });
+                    // KPI 매핑이 없는 키 (siteType/structureType 등) 는 form 채움 skip — 단지 노출만.
+                    if (!mapping)
+                        continue;
+                    if (isPlan) {
+                        // 계획값 (키스콘 제공) — 계획 칼럼 표시 + KpiMetric value 에도 upsert
+                        // 하여 _save 시 patches 에 포함. 사용자가 계획 input 직접 편집해도 같은 흐름.
+                        this.collectedPlan = Object.assign(Object.assign({}, this.collectedPlan), { [projectKey]: numericValue });
+                        this.planSources = Object.assign(Object.assign({}, this.planSources), { [projectKey]: r.label });
+                        this.justFilled = Object.assign(Object.assign({}, this.justFilled), { [`plan:${projectKey}`]: true });
+                        const planMetric = this.kpiMetrics.find((m) => { var _a; return ((_a = KPI_METRIC_KEY_MAPPING.find(x => x.label === m.name)) === null || _a === void 0 ? void 0 : _a.projectKey) === projectKey; });
+                        if (planMetric)
+                            this._setMetricValue(planMetric, numericValue);
+                    }
+                    else {
+                        // 실제값 (세움터/올바로/기타) — 매칭되는 metric 의 실제 칼럼에 반영
+                        const metric = this.kpiMetrics.find((m) => { var _a; return ((_a = KPI_METRIC_KEY_MAPPING.find(x => x.label === m.name)) === null || _a === void 0 ? void 0 : _a.projectKey) === projectKey; });
+                        if (!metric)
+                            continue;
+                        this._setMetricValue(metric, numericValue);
+                        this.valueSources = Object.assign(Object.assign({}, this.valueSources), { [metric.id]: r.label });
+                        this.justFilled = Object.assign(Object.assign({}, this.justFilled), { [metric.id]: true });
+                    }
+                }
+                this.collectedSummary = Object.assign(Object.assign({}, this.collectedSummary), { [r.label]: summary });
+            }
+            this.collectStatus = status;
+            this.collectError = errors;
+            // 재조회 안 함 — 시나리오는 fetch + result 반환만 책임 (DB 적재 X). 직전에
+            // _setMetricValue 가 memory 에 채운 값들을 DB 의 옛 값으로 덮어쓰면 자동수집
+            // 결과가 폼에 반영되지 않음. 사용자가 [저장] 버튼 누르면 그제서야 DB 반영.
+            this.requestUpdate();
+            setTimeout(() => (this.justFilled = {}), 1300);
+            const okCount = results.filter(r => r.ok).length;
+            if (okCount === results.length) {
+                notify({ message: `외부 시스템 ${okCount}건 모두 수집 완료. 검토 후 [저장]을 눌러주세요.` });
+            }
+            else if (okCount === 0) {
+                notify({ message: '외부 시스템에서 가져올 정보가 없습니다.' });
+            }
+            else {
+                notify({ message: `외부 시스템 수집 — ${okCount}건 완료, 나머지는 정보 없음.` });
+            }
+        }
+        catch (e) {
+            // mutation 자체 실패 (네트워크/권한 등) — 모든 카드를 정보 없음 으로
+            const msg = e instanceof Error ? e.message : String(e);
+            console.warn('[자동수집] 전체 호출 실패', e);
+            const status = {};
+            const errors = {};
+            for (const meta of INTEGRATION_SOURCES) {
+                status[meta.source] = 'error';
+                errors[meta.source] = '업데이트할 정보가 없습니다';
+            }
+            this.collectStatus = status;
+            this.collectError = errors;
+            notify({ message: '외부 시스템 연동이 일시적으로 안 됩니다.' });
+        }
+        finally {
+            this.collecting = false;
+        }
+    }
+    /**
+     * 메트릭의 실제값 set/add — _onInputChange 와 동일하게 periodType 별 row upsert.
+     */
+    _setMetricValue(metric, value) {
+        this.kpiMetricValues = this._upsertValueForMetric(this.kpiMetricValues, metric, value);
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        const [canSave, canAutoCollect] = await Promise.all([
+            hasPrivilege({ category: 'kpi', privilege: 'input', domainOwnerGranted: true, superUserGranted: true }),
+            hasPrivilege({ category: 'kpi', privilege: 'auto-collect', domainOwnerGranted: true, superUserGranted: true })
+        ]);
+        this.canSave = canSave;
+        this.canAutoCollect = canAutoCollect;
+    }
     willUpdate(changedProperties) {
         var _a;
         super.willUpdate(changedProperties);
@@ -87,9 +345,23 @@ let SvProjectCompleteTab1Plan = class SvProjectCompleteTab1Plan extends LitEleme
         }
     }
     async _getInitData() {
-        const kpiMetrics = await getKpiMetrics();
-        this.kpiMetrics = kpiMetrics.filter(item => !item.name.includes('평가')) || []; // 평가 텍스트가 들어간건 제외
-        this.kpiMetricValues = await getKpiMetricValues(this.project.id);
+        var _a, _b;
+        // getKpiMetrics 가 이미 active=true 만 반환. 여기선 평가 (Step2) 만 추가 제외.
+        // 비활성화는 KPI 관리 admin 에서 active=false 처리.
+        const kpiMetrics = await getKpiMetrics((_a = this.project) === null || _a === void 0 ? void 0 : _a.code);
+        // 평가(Step2) 만 제외. 나머지는 기본정보 탭에서 '기본정보'/'월별 데이터' 두 섹션으로 구분 렌더.
+        this.kpiMetrics = kpiMetrics.filter(item => !item.name.includes('평가')) || [];
+        this.kpiMetricValues = await getKpiMetricValues(this.project.id, (_b = this.project) === null || _b === void 0 ? void 0 : _b.code);
+    }
+    /**
+     * 계획공사비/계획공사기간 의 "계획" 컬럼 input 편집 핸들러 — collectedPlan 표시값 동기화 +
+     * 해당 KpiMetric 의 value 도 upsert 하여 _save 시 patches 에 포함되도록.
+     */
+    _onPlanInputChange(event, metric, projectKey) {
+        const target = event.target;
+        const inputVal = Number(target.value.replace(/[^\d.-]/g, ''));
+        this.collectedPlan = Object.assign(Object.assign({}, this.collectedPlan), { [projectKey]: inputVal });
+        this.kpiMetricValues = this._upsertValueForMetric(this.kpiMetricValues, metric, inputVal);
     }
     // Input 요소의 값이 변경될 때 호출되는 콜백 함수
     _onInputChange(event, metric) {
@@ -97,33 +369,77 @@ let SvProjectCompleteTab1Plan = class SvProjectCompleteTab1Plan extends LitEleme
         let inputVal = target.value;
         // 숫자 타입은 다른 문자 입력 제거
         if (target.hasAttribute('numeric')) {
-            inputVal = Number(inputVal.replace(/[^\d.]/g, ''));
+            inputVal = Number(inputVal.replace(/[^\d.-]/g, ''));
         }
-        // 기존 배열에서 해당 id를 가진 항목을 찾음
-        const existingItemIndex = this.kpiMetricValues.findIndex((item) => item.metricId === metric.id);
-        if (existingItemIndex !== -1) {
-            // 기존 항목이 있으면 업데이트
-            this.kpiMetricValues = this.kpiMetricValues.map((item) => item.metricId === metric.id ? Object.assign(Object.assign({}, item), { value: inputVal }) : item);
+        this.kpiMetricValues = this._upsertValueForMetric(this.kpiMetricValues, metric, inputVal);
+    }
+    /**
+     * metric.periodType 에 따라 적절한 row 를 upsert.
+     *   - MONTH   : 전월 row (YYYY-MM-01). "오늘 입력 = 지난달 데이터" 운영 원칙.
+     *   - ALLTIME : 단일 row (valueDate sentinel 무관).
+     *   - 그 외 (DAY/WEEK/QUARTER/YEAR/RANGE) : metric.periodType 그대로, valueDate=today.
+     * 매칭은 (metricId, periodType) 기준 — MONTH 만 추가로 valueDate prefix.
+     */
+    _upsertValueForMetric(values, metric, value) {
+        const today = moment().tz('Asia/Seoul');
+        const todayYmd = today.format('YYYY-MM-DD');
+        const periodType = metric.periodType;
+        let updated = [...values];
+        if (periodType === 'MONTH') {
+            const lastMonth = today.clone().subtract(1, 'month');
+            const lastMonth1 = lastMonth.format('YYYY-MM-01');
+            const lastMonthYm = lastMonth.format('YYYY-MM');
+            const idx = updated.findIndex((i) => i.metricId === metric.id && i.periodType === 'MONTH' && (i.valueDate || '').startsWith(lastMonthYm));
+            if (idx !== -1) {
+                updated[idx] = Object.assign(Object.assign({}, updated[idx]), { value });
+            }
+            else {
+                updated.push({
+                    id: crypto.randomUUID(),
+                    value,
+                    metricId: metric.id,
+                    unit: metric.unit || '',
+                    org: this.project.id,
+                    periodType: 'MONTH',
+                    valueDate: lastMonth1
+                });
+            }
         }
         else {
-            // 기존 항목이 없으면 새로 추가
-            this.kpiMetricValues = [
-                ...this.kpiMetricValues,
-                {
+            // ALLTIME / DAY / WEEK / QUARTER / YEAR / RANGE — metric.periodType 그대로 단일 row upsert.
+            const idx = updated.findIndex((i) => i.metricId === metric.id && i.periodType === periodType);
+            if (idx !== -1) {
+                updated[idx] = Object.assign(Object.assign({}, updated[idx]), { value });
+            }
+            else {
+                updated.push({
                     id: crypto.randomUUID(),
-                    value: inputVal,
+                    value,
                     metricId: metric.id,
                     unit: metric.unit || '',
-                    org: this.project.id, // 프로젝트 ID 추가
-                    periodType: metric.periodType,
-                    valueDate: moment().tz('Asia/Seoul').format('YYYY-MM-DD')
-                }
-            ];
+                    org: this.project.id,
+                    periodType,
+                    valueDate: todayYmd
+                });
+            }
         }
+        return updated;
     }
     async _save() {
-        const response = await updateProjectCompleteStep1(this.kpiMetricValues);
+        var _a, _b;
+        // 사용자가 실제 편집한 row 만 저장. 자동 산정 metric (계획/실제 공사비·공기) 는
+        // 별도의 데이터 출처(project 정보, 키스콘 수집, 다른 metric 의 전월 row 등)에서
+        // 도출돼야 하므로 이 화면에서 하드코딩 derive 하지 않음.
+        const response = await updateProjectCompleteStep1(this.kpiMetricValues, (_a = this.project) === null || _a === void 0 ? void 0 : _a.code);
         if (!response.errors) {
+            // 양방향 동기 — 연면적/용적률/투입인력/설계변경건 값을 BuildingComplex(프로젝트 정보)에도 반영.
+            // 보조 동기 실패가 저장 성공 UX 를 막지 않도록 warn 만.
+            try {
+                await syncKpiToProjectInfo(this.project, this.kpiMetrics, this.kpiMetricValues, (_b = this.project) === null || _b === void 0 ? void 0 : _b.code);
+            }
+            catch (e) {
+                console.warn('[KPI→프로젝트정보] BuildingComplex 동기 실패', e);
+            }
             notify({ message: '저장되었습니다.' });
         }
     }
@@ -153,7 +469,7 @@ SvProjectCompleteTab1Plan.styles = [
         min-height: 35px;
         background: #f3f3fa;
         border-top: 2px #0c4da2 solid;
-        grid-template-columns: 220px 1fr 1fr 200px;
+        grid-template-columns: 220px 320px 1fr;
         padding: 0px 25px;
 
         .header-label {
@@ -161,9 +477,13 @@ SvProjectCompleteTab1Plan.styles = [
           text-align: center;
         }
       }
+      /* '기본정보' / '월별 데이터' 섹션 사이 간격 */
+      .row.header.section-gap {
+        margin-top: 24px;
+      }
       .row {
         display: grid;
-        grid-template-columns: 220px 1fr 1fr 200px;
+        grid-template-columns: 220px 320px 1fr;
         gap: 6px 10px;
         align-items: center;
         padding: 8px 25px;
@@ -172,7 +492,11 @@ SvProjectCompleteTab1Plan.styles = [
         .cell {
           display: flex;
           align-items: center;
-          justify-content: center;
+          justify-content: flex-start;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+          gap: 6px;
+          padding-right: 12px;
         }
       }
       .label {
@@ -181,7 +505,8 @@ SvProjectCompleteTab1Plan.styles = [
         letter-spacing: -0.05em;
         white-space: nowrap;
         display: flex;
-        justify-content: center;
+        justify-content: flex-end;
+        padding-right: 12px;
       }
       input {
         padding: 6px 8px;
@@ -191,6 +516,7 @@ SvProjectCompleteTab1Plan.styles = [
         color: #212529;
         font-size: 16px;
         margin-right: 5px;
+        text-align: right;
 
         &:disabled {
           background: #f6f6f6;
@@ -200,6 +526,12 @@ SvProjectCompleteTab1Plan.styles = [
         text-align: center;
         color: #212529;
       }
+      .desc {
+        color: #5a6168;
+        font-size: 12px;
+        line-height: 1.4;
+        padding-left: 8px;
+      }
       .plus {
         color: #e13232;
         font-weight: 700;
@@ -227,21 +559,231 @@ SvProjectCompleteTab1Plan.styles = [
       .ghost-btn.secondary {
         background: #24be7b;
       }
+      .ghost-btn.disabled,
+      .collect-btn.disabled {
+        opacity: 0.45;
+        cursor: not-allowed;
+      }
+
+      /* ── 자동 수집 패널 ── */
+      .collect-panel {
+        margin: 4px 6px 14px;
+        border: 1px solid #d7e3f2;
+        border-radius: 8px;
+        background: linear-gradient(180deg, #f7fafe 0%, #ffffff 100%);
+        overflow: hidden;
+      }
+      .collect-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 10px 16px;
+        background: #eaf2fb;
+        border-bottom: 1px solid #d7e3f2;
+      }
+      .collect-head .ttl {
+        color: #0c4da2;
+        font-weight: 700;
+        font-size: 14px;
+        letter-spacing: -0.03em;
+      }
+      .collect-head .ttl small {
+        color: #5a7da6;
+        font-weight: 400;
+        margin-left: 8px;
+      }
+      .collect-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 7px 14px;
+        background: #0c4da2;
+        color: #fff;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .collect-btn[disabled] {
+        background: #9bb4d2;
+        cursor: default;
+      }
+      .source-list {
+        display: flex;
+        gap: 10px;
+        padding: 12px 16px;
+        flex-wrap: wrap;
+      }
+      .source-card {
+        flex: 1 1 200px;
+        border: 1px solid #e3e9f0;
+        border-radius: 7px;
+        padding: 10px 12px;
+        background: #fff;
+        transition:
+          border-color 0.2s,
+          box-shadow 0.2s;
+      }
+      .source-card.collecting {
+        border-color: #2e79be;
+        box-shadow: 0 0 0 3px rgba(46, 121, 190, 0.12);
+      }
+      .source-card.done {
+        border-color: #24be7b;
+      }
+      .source-card .sc-head {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+        color: #212529;
+        font-size: 13px;
+      }
+      .source-card .sc-head .sys-icon {
+        font-size: 16px;
+      }
+      .source-card .sc-status {
+        margin-left: auto;
+        font-size: 12px;
+      }
+      .sc-status.idle {
+        color: #aab4c0;
+      }
+      .sc-status.collecting {
+        color: #2e79be;
+      }
+      .sc-status.done {
+        color: #24be7b;
+        font-weight: 700;
+      }
+      .sc-status.error {
+        color: #8a8a8a;
+        font-weight: 600;
+      }
+      .source-card.error {
+        background: #fafafa;
+        border-color: #e0e0e0;
+      }
+      .source-card .sc-error-msg {
+        margin-top: 6px;
+        padding: 6px 8px;
+        border-radius: 4px;
+        background: #f3f4f6;
+        color: #6b7280;
+        font-size: 12px;
+        line-height: 1.4;
+        word-break: break-word;
+      }
+      .source-card .sc-fields {
+        margin-top: 8px;
+        display: flex;
+        flex-direction: column;
+        gap: 3px;
+      }
+      .sc-field {
+        font-size: 12px;
+        color: #5a6b7b;
+        display: flex;
+        justify-content: space-between;
+      }
+      .sc-field b {
+        color: #0c4da2;
+      }
+      .sc-desc {
+        font-size: 11px;
+        color: #9aa7b4;
+        margin-top: 2px;
+      }
+      /* 가져온 값 출처 칩 */
+      .src-chip {
+        display: inline-flex;
+        align-items: center;
+        margin-left: 6px;
+        padding: 1px 7px;
+        font-size: 11px;
+        border-radius: 10px;
+        background: #e7f3ec;
+        color: #1d9c63;
+        white-space: nowrap;
+      }
+      .cell.just-filled input {
+        animation: flash 1.1s ease;
+      }
+      /* 미입력 — kpiMetricValue 가 비어있는 metric 행 */
+      .label.pending::before {
+        content: '⚠';
+        color: #e74c3c;
+        margin-right: 4px;
+      }
+      .cell.pending input {
+        border-color: #e74c3c;
+        background-color: #fff5f5;
+      }
+      @keyframes flash {
+        0% {
+          background: #fff7cc;
+        }
+        100% {
+          background: #ffffff;
+        }
+      }
     `
 ];
+/** 계획 칼럼을 갖는 항목 (키스콘이 계획값을 제공) */
+SvProjectCompleteTab1Plan.PLAN_KEYS = ['constructionPeriod', 'constructionCost'];
 __decorate([
-    property({ type: Array }),
+    state(),
     __metadata("design:type", Object)
 ], SvProjectCompleteTab1Plan.prototype, "kpiMetricValues", void 0);
 __decorate([
-    property({ type: Array }),
+    state(),
     __metadata("design:type", Object)
 ], SvProjectCompleteTab1Plan.prototype, "kpiMetrics", void 0);
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)
 ], SvProjectCompleteTab1Plan.prototype, "project", void 0);
-SvProjectCompleteTab1Plan = __decorate([
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "collectStatus", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "collectError", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "valueSources", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "collectedPlan", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "planSources", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "collectedSummary", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "justFilled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "collecting", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "canSave", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "canAutoCollect", void 0);
+SvProjectCompleteTab1Plan = SvProjectCompleteTab1Plan_1 = __decorate([
     customElement('sv-pc-tab1-plan')
 ], SvProjectCompleteTab1Plan);
 export { SvProjectCompleteTab1Plan };