@dssp/dkpi 1.0.0-alpha.9 → 1.0.0-alpha.91

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

@@ -0,0 +1,775 @@
+var SvProjectCompleteTab1Plan_1;
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { calcDiff, calcDateDiff } from '../../shared/func';
+import { getKpiMetricValues, getKpiMetrics, updateProjectCompleteStep1, collectProjectExternalData } from '../../shared/complete-api';
+import { INTEGRATION_SOURCES } from '../../shared/integration-fetch';
+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: '총 투입인력(M/M)', projectKey: 'workerCount' },
+    { label: '재해 건수', projectKey: 'accidentCount' },
+    { label: '일정 이탈 수준', projectKey: 'scheduleDeviationLevel' },
+    { label: '총 건설 폐기물 발생량', projectKey: 'totalConstructionWasteAmount' },
+    { label: '용적율', projectKey: 'floorAreaRatio' },
+    { label: '총 설계 변경 건', projectKey: 'designChangeCount' },
+    { label: '공사비', projectKey: 'constructionCost' },
+    { label: '연면적', projectKey: 'area' },
+    { label: '지상층수', projectKey: 'upperFloorCount' },
+    { label: '지하층수', projectKey: 'lowerFloorCount' }
+];
+// 계획값이 없는 것들 (실제값으로 표시할 필드)
+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>
+          당초 계획 대비 실제 진행 과정에서 변동된 공사비, 공기(공사기간), 면적, 기타 주요 항목을 현실에 맞게 수정·입력합니다.
+          <br />이 정보는 성과 분석, KPI 평가, 통계 산출 등에 기준값으로 사용되므로, 가능한 한 실제 값 기준으로 정확히
+          입력해주시기 바랍니다.
+        </div>
+      </div>
+
+      ${this._renderCollectPanel()}
+
+      <div class="rows">
+        <div class="row header">
+          <div class="header-label">기본정보</div>
+          <div class="header-label">값</div>
+          <div class="header-label">설명</div>
+        </div>
+
+        ${this.kpiMetrics.map(metric => {
+            var _a, _b, _c, _d, _e;
+            // 상수로 정의된 매핑 정보에서 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 diffValue = calcDiff(planValue, actualValue);
+            const diffClass = diffValue === 0 ? '' : diffValue > 0 ? 'plus' : 'minus';
+            const diffSign = diffValue === 0 ? '' : diffValue > 0 ? '+' : '-';
+            const src = this.valueSources[metric.id];
+            // 계획값: 키스콘 수집값이 있으면 그것을, 없으면 계산된 planValue
+            const planSrc = this.planSources[projectKey];
+            const shownPlan = (_e = this.collectedPlan[projectKey]) !== null && _e !== void 0 ? _e : planValue;
+            const planFilled = this.justFilled[`plan:${projectKey}`];
+            // 계획값이 키스콘에서 들어왔으면 편차도 그 기준으로 재계산
+            const effDiff = calcDiff(shownPlan, actualValue);
+            const effDiffClass = effDiff === 0 ? '' : effDiff > 0 ? 'plus' : 'minus';
+            const effDiffSign = effDiff === 0 ? '' : effDiff > 0 ? '+' : '-';
+            // 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>`;
+        })}
+
+        <div class="button-line">
+          <div class="ghost-btn" @click=${this._reset}>초기화</div>
+          <div
+            class="ghost-btn secondary ${this.canSave ? '' : 'disabled'}"
+            title=${this.canSave ? '' : 'kpi:input 권한 필요'}
+            @click=${() => this.canSave && this._save()}
+          >
+            저장
+          </div>
+        </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);
+        // project가 변경되고, project.id가 존재하면 데이터 로드
+        if (changedProperties.has('project') && ((_a = this.project) === null || _a === void 0 ? void 0 : _a.id)) {
+            this._getInitData();
+        }
+    }
+    async _getInitData() {
+        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);
+        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) {
+        const target = event.target;
+        let inputVal = target.value;
+        // 숫자 타입은 다른 문자 입력 제거
+        if (target.hasAttribute('numeric')) {
+            inputVal = Number(inputVal.replace(/[^\d.-]/g, ''));
+        }
+        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 {
+            // 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,
+                    metricId: metric.id,
+                    unit: metric.unit || '',
+                    org: this.project.id,
+                    periodType,
+                    valueDate: todayYmd
+                });
+            }
+        }
+        return updated;
+    }
+    async _save() {
+        var _a;
+        // 사용자가 실제 편집한 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) {
+            notify({ message: '저장되었습니다.' });
+        }
+    }
+    _reset() {
+        this._getInitData();
+    }
+};
+SvProjectCompleteTab1Plan.styles = [
+    css `
+      :host {
+        display: block;
+      }
+      .title {
+        color: #212529;
+        font-size: 13px;
+        font-weight: 400;
+        line-height: 24px;
+        text-align: center;
+      }
+
+      .rows {
+        display: flex;
+        flex-direction: column;
+        padding: 8px 6px;
+      }
+      .row.header {
+        min-height: 35px;
+        background: #f3f3fa;
+        border-top: 2px #0c4da2 solid;
+        grid-template-columns: 220px 320px 1fr;
+        padding: 0px 25px;
+
+        .header-label {
+          color: #212529;
+          text-align: center;
+        }
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 220px 320px 1fr;
+        gap: 6px 10px;
+        align-items: center;
+        padding: 8px 25px;
+        border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
+
+        .cell {
+          display: flex;
+          align-items: center;
+          justify-content: flex-start;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+          gap: 6px;
+          padding-right: 12px;
+        }
+      }
+      .label {
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+        white-space: nowrap;
+        display: flex;
+        justify-content: flex-end;
+        padding-right: 12px;
+      }
+      input {
+        padding: 6px 8px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        background: #ffffff;
+        color: #212529;
+        font-size: 16px;
+        margin-right: 5px;
+        text-align: right;
+
+        &:disabled {
+          background: #f6f6f6;
+        }
+      }
+      .unit {
+        text-align: center;
+        color: #212529;
+      }
+      .desc {
+        color: #5a6168;
+        font-size: 12px;
+        line-height: 1.4;
+        padding-left: 8px;
+      }
+      .plus {
+        color: #e13232;
+        font-weight: 700;
+      }
+      .minus {
+        color: #1e88e5;
+        font-weight: 700;
+      }
+      .button-line {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        margin-top: 16px;
+      }
+      .ghost-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: #35618e;
+        color: #ffffff;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+      .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([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "kpiMetricValues", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "kpiMetrics", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "project", void 0);
+__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 };
+//# sourceMappingURL=pc-tab1-plan.js.map