@dssp/dkpi 1.0.0-alpha.99 → 1.0.0

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

@@ -1,674 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import { css, html, LitElement } from 'lit';
-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';
-import { tenantHeaders } from '@dssp/project/dist-client/shared/domain-context';
-import { ProjectState } from '../sv-project-list';
-import '@things-factory/kpi/dist-client/viewparts/kpi-metric-input';
-/**
- * 프로젝트 완공 처리 탭 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 = {};
-        /** 월별 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();
-        return html `
-      <div class="title">
-        프로젝트 수행 기간 동안의 월별 데이터를 입력합니다.<br />
-        공정률, 감리자 정성 평가(1~5) 등의 항목을 월 단위로 기록하여 성과 추세 분석에 활용합니다.
-      </div>
-
-      ${this.isCompleted
-            ? html `<div class="toolbar">
-            <span class="locked-note">🔒 종료된 프로젝트 — 월 추가 불가, 기존 월 데이터만 수정할 수 있습니다.</span>
-          </div>`
-            : html `<div class="toolbar">
-            <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
-              .value=${String(this.addMonth)}
-              @change=${(e) => (this.addMonth = Number(e.target.value))}
-            >
-              ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(m => html `<option value=${m} ?selected=${m === this.addMonth}>${m}월</option>`)}
-            </select>
-            <div class="add-btn" @click=${this._addMonth}>+ 월 추가</div>
-          </div>`}
-
-      ${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;
-                    const pending = this._isCellPending(row, m.id);
-                    // 위젯은 metric.meta.input 선언으로 결정(이름추측 isRating 제거).
-                    return html `
-                              <td class=${pending ? 'pending' : ''}>
-                                <kpi-metric-input
-                                  .metric=${this._withInputHint(m)}
-                                  .value=${(_a = row.values[m.id]) !== null && _a !== void 0 ? _a : null}
-                                  ?disabled=${!this.canSave}
-                                  @metric-input-change=${(e) => this._setCell(rowIdx, m.id, e.detail.value)}
-                                ></kpi-metric-input>
-                              </td>
-                            `;
-                })}
-                          <td>
-                            ${row.dirty
-                    ? html `<span class="status-unsaved">수정됨</span>`
-                    : 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 ${this.canSave ? '' : 'disabled'}"
-          title=${this.canSave ? '' : 'kpi:input 권한 필요'}
-          @click=${() => this.canSave && this._save()}
-        >
-          저장
-        </div>
-      </div>
-    `;
-    }
-    willUpdate(changedProperties) {
-        var _a;
-        super.willUpdate(changedProperties);
-        if (changedProperties.has('project') && ((_a = this.project) === null || _a === void 0 ? void 0 : _a.id)) {
-            this._loadData();
-        }
-    }
-    _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 endYear = ((_b = this.project) === null || _b === void 0 ? void 0 : _b.endDate) ? new Date(this.project.endDate).getFullYear() + 1 : new Date().getFullYear() + 1;
-        const years = [];
-        for (let y = startYear; y <= endYear; y++)
-            years.push(y);
-        return years;
-    }
-    _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, _c, _d, _e, _f;
-        try {
-            // 1) 월별 metric 목록
-            const metricsResp = await client.query({
-                query: gql `
-          query KpiMetrics {
-            kpiMetrics {
-              items {
-                id
-                name
-                unit
-                periodType
-                rank
-                meta
-                collectType
-              }
-            }
-          }
-        `,
-                context: { headers: tenantHeaders((_a = this.project) === null || _a === void 0 ? void 0 : _a.code) }
-            });
-            const all = ((_c = (_b = metricsResp.data) === null || _b === void 0 ? void 0 : _b.kpiMetrics) === null || _c === void 0 ? void 0 : _c.items) || [];
-            // periodType=MONTH 만, rank 오름차순(미지정 null 은 뒤로, 동률은 기존 순서 유지).
-            this.monthlyMetrics = all
-                .filter((m) => m.periodType === 'MONTH')
-                .map((m, i) => ({ m, i }))
-                .sort((a, b) => {
-                var _a, _b;
-                const ra = (_a = a.m.rank) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY;
-                const rb = (_b = b.m.rank) !== null && _b !== void 0 ? _b : Number.POSITIVE_INFINITY;
-                return ra !== rb ? ra - rb : a.i - b.i;
-            })
-                .map((x) => x.m);
-            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 !== '';
-        });
-    }
-    /** 종료(COMPLETED) 프로젝트 — 신규 월 추가 금지, 기존 월만 수정 가능. */
-    get isCompleted() {
-        var _a;
-        return ((_a = this.project) === null || _a === void 0 ? void 0 : _a.state) === ProjectState.COMPLETED;
-    }
-    _addMonth() {
-        // 종료된 프로젝트는 새 월을 추가할 수 없다 (기존 월 데이터 수정만 허용).
-        if (this.isCompleted) {
-            notify({ message: '종료된 프로젝트는 월을 추가할 수 없습니다. 기존 월 데이터만 수정할 수 있습니다.' });
-            return;
-        }
-        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, values: {}, originalValues: {}, valueIds: {}, dirty: true, isNew: true };
-        const rows = [...this.monthRows, newRow];
-        rows.sort((a, b) => b.workDate.localeCompare(a.workDate));
-        this.monthRows = rows;
-    }
-    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: '삭제 중 오류가 발생했습니다. 권한을 확인해주세요.' });
-        }
-    }
-    /**
-     * metric 입력 힌트 결정: DB 선언(meta.input) 우선. 없으면 전환용 파생(DB meta 미도입 동안).
-     * 향후 metric.meta.input 이 채워지면 이 파생 분기(및 isRating)는 제거한다.
-     */
-    _withInputHint(m) {
-        var _a, _b;
-        // 유효 힌트: DB 선언(meta.input) 우선, 없으면 전환용 파생.
-        const input = ((_a = m === null || m === void 0 ? void 0 : m.meta) === null || _a === void 0 ? void 0 : _a.input)
-            ? m.meta.input
-            : isRating(m === null || m === void 0 ? void 0 : m.name)
-                ? { widget: 'rating', max: 5, step: 1 }
-                : { widget: 'number', step: 1, min: 0 };
-        // 월별 그리드는 조밀해 별표 시인성이 떨어지므로, rating 은 1~N 셀렉터로 "표현"만 오버라이드.
-        // (metric 설정=별표 는 그대로. 넓은 완료평가 화면은 별표 유지)
-        if (input.widget === 'rating') {
-            const max = (_b = input.max) !== null && _b !== void 0 ? _b : 5;
-            const options = Array.from({ length: max }, (_, i) => ({ value: i + 1, label: String(i + 1) }));
-            return Object.assign(Object.assign({}, m), { meta: Object.assign(Object.assign({}, ((m === null || m === void 0 ? void 0 : m.meta) || {})), { input: { widget: 'select', options } }) });
-        }
-        return Object.assign(Object.assign({}, m), { meta: Object.assign(Object.assign({}, ((m === null || m === void 0 ? void 0 : m.meta) || {})), { input }) });
-    }
-    /** <kpi-metric-input> 이 방출하는 (이미 타입된) 값을 그대로 저장. */
-    _setCell(rowIdx, metricId, value) {
-        this.monthRows = this.monthRows.map((row, i) => i !== rowIdx ? row : 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() {
-        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;
-        }
-        try {
-            const response = await client.mutate({
-                mutation: gql `
-          mutation UpdateKpiMetricValuesCumulative($patches: [KpiMetricValuePatch!]!) {
-            updateKpiMetricValuesCumulative(patches: $patches) {
-              id
-            }
-          }
-        `,
-                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();
-        }
-        catch (e) {
-            console.error('Failed to save monthly values:', e);
-            notify({ message: '저장 중 오류가 발생했습니다.' });
-        }
-    }
-    _reset() {
-        this._loadData();
-    }
-};
-SvProjectCompleteTab4Monthly.styles = [
-    css `
-      :host {
-        display: block;
-      }
-      .title {
-        color: #212529;
-        font-size: 13px;
-        font-weight: 400;
-        line-height: 24px;
-        text-align: center;
-        margin-bottom: 8px;
-      }
-
-      .toolbar {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 12px;
-        margin-bottom: 12px;
-      }
-      .toolbar select {
-        padding: 5px 8px;
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        border-radius: 5px;
-        font-size: 14px;
-        color: #212529;
-      }
-      .toolbar .add-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 5px 10px;
-        background: #35618e;
-        color: #fff;
-        border-radius: 5px;
-        cursor: pointer;
-        font-size: 13px;
-      }
-      .toolbar .locked-note {
-        font-size: 13px;
-        color: #6c757d;
-      }
-
-      .grid-wrapper {
-        overflow-x: auto;
-        padding: 0 6px;
-      }
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        font-size: 13px;
-      }
-      thead th {
-        background: #f3f3fa;
-        border-top: 2px solid #0c4da2;
-        color: #212529;
-        text-align: center;
-        padding: 8px 6px;
-        white-space: nowrap;
-        font-weight: 500;
-      }
-      tbody td {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-        text-align: center;
-        padding: 6px 4px;
-        vertical-align: middle;
-      }
-      tbody tr:hover {
-        background: #f8fafc;
-      }
-      .month-cell {
-        color: #35618e;
-        font-weight: 600;
-        white-space: nowrap;
-      }
-      .month-cell.current {
-        color: #16a085;
-      }
-
-      input[type='number'] {
-        width: 70px;
-        padding: 4px 6px;
-        border: 1px solid rgba(0, 0, 0, 0.12);
-        border-radius: 4px;
-        text-align: center;
-        font-size: 13px;
-      }
-      input[type='number']:focus {
-        outline: none;
-        border-color: #35618e;
-      }
-
-      .rating-select {
-        padding: 4px 6px;
-        border: 1px solid rgba(0, 0, 0, 0.12);
-        border-radius: 4px;
-        font-size: 13px;
-        text-align: center;
-      }
-
-      .status-saved {
-        color: #16a085;
-        font-size: 12px;
-      }
-      .status-unsaved {
-        color: #e67e22;
-        font-size: 12px;
-      }
-      .status-new {
-        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;
-        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 {
-        opacity: 0.45;
-        cursor: not-allowed;
-      }
-
-      .delete-btn {
-        cursor: pointer;
-        color: #999;
-        font-size: 18px;
-      }
-      .delete-btn:hover {
-        color: #e74c3c;
-      }
-
-      .empty-msg {
-        text-align: center;
-        color: #999;
-        padding: 40px 0;
-        font-size: 14px;
-      }
-    `
-];
-__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)
-], SvProjectCompleteTab4Monthly.prototype, "monthRows", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Number)
-], SvProjectCompleteTab4Monthly.prototype, "addYear", void 0);
-__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);
-export { SvProjectCompleteTab4Monthly };
-//# sourceMappingURL=pc-tab4-monthly.js.map