@dssp/dkpi 1.0.0-alpha.5 → 1.0.0-alpha.51

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

@@ -0,0 +1,248 @@
+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 moment from 'moment-timezone';
+import { notify } from '@operato/layout';
+const KPI_METRIC_KEY_MAPPING = [
+    { label: '공사기간', projectKey: 'constructionPeriod' },
+    { label: '총 근로자수', projectKey: 'totalWorkerCount' },
+    { label: '연간 근로자 수', projectKey: 'annualWorkerCount' },
+    { label: '투입인력', 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' }
+];
+let SvProjectCompleteTab1Plan = class SvProjectCompleteTab1Plan extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.kpiMetricValues = [];
+        this.kpiMetrics = [];
+        this.project = {};
+    }
+    render() {
+        return html `
+      <div class="title">
+        <div>
+          당초 계획 대비 실제 진행 과정에서 변동된 공사비, 공기(공사기간), 면적, 기타 주요 항목을 현실에 맞게 수정·입력합니다.
+          <br />이 정보는 성과 분석, KPI 평가, 통계 산출 등에 기준값으로 사용되므로, 가능한 한 실제 값 기준으로 정확히
+          입력해주시기 바랍니다.
+        </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.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="button-line">
+          <div class="ghost-btn" @click=${this._reset}>초기화</div>
+          <div class="ghost-btn secondary" @click=${() => this._save()}>저장</div>
+        </div>
+      </div>
+    `;
+    }
+    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() {
+        const kpiMetrics = await getKpiMetrics();
+        this.kpiMetrics = kpiMetrics.filter(item => !item.name.includes('평가')) || []; // 평가 텍스트가 들어간건 제외
+        this.kpiMetricValues = await getKpiMetricValues(this.project.id);
+    }
+    // Input 요소의 값이 변경될 때 호출되는 콜백 함수
+    _onInputChange(event, metric) {
+        const target = event.target;
+        let inputVal = target.value;
+        // 숫자 타입은 다른 문자 입력 제거
+        if (target.hasAttribute('numeric')) {
+            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);
+        }
+        else {
+            // 기존 항목이 없으면 새로 추가
+            this.kpiMetricValues = [
+                ...this.kpiMetricValues,
+                {
+                    id: crypto.randomUUID(),
+                    value: inputVal,
+                    metricId: metric.id,
+                    unit: metric.unit || '',
+                    org: this.project.id, // 프로젝트 ID 추가
+                    periodType: metric.periodType,
+                    valueDate: moment().tz('Asia/Seoul').format('YYYY-MM-DD')
+                }
+            ];
+        }
+    }
+    async _save() {
+        const response = await updateProjectCompleteStep1(this.kpiMetricValues);
+        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 1fr 1fr 200px;
+        padding: 0px 25px;
+
+        .header-label {
+          color: #212529;
+          text-align: center;
+        }
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 220px 1fr 1fr 200px;
+        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: center;
+        }
+      }
+      .label {
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+        white-space: nowrap;
+        display: flex;
+        justify-content: center;
+      }
+      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;
+
+        &:disabled {
+          background: #f6f6f6;
+        }
+      }
+      .unit {
+        text-align: center;
+        color: #212529;
+      }
+      .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;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "kpiMetricValues", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "kpiMetrics", void 0);
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab1Plan.prototype, "project", void 0);
+SvProjectCompleteTab1Plan = __decorate([
+    customElement('sv-pc-tab1-plan')
+], SvProjectCompleteTab1Plan);
+export { SvProjectCompleteTab1Plan };
+//# sourceMappingURL=pc-tab1-plan.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pc-tab1-plan.js","sourceRoot":"","sources":["../../../client/pages/project-complete-tabs/pc-tab1-plan.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { calcDiff, calcDateDiff } from '../../shared/func'\nimport { getKpiMetricValues, getKpiMetrics, updateProjectCompleteStep1 } from '../../shared/complete-api'\nimport moment from 'moment-timezone'\nimport { notify } from '@operato/layout'\n\nconst KPI_METRIC_KEY_MAPPING = [\n  { label: '공사기간', projectKey: 'constructionPeriod' },\n  { label: '총 근로자수', projectKey: 'totalWorkerCount' },\n  { label: '연간 근로자 수', projectKey: 'annualWorkerCount' },\n  { label: '투입인력', projectKey: 'workerCount' },\n  { label: '재해 건수', projectKey: 'accidentCount' },\n  { label: '일정 이탈 수준', projectKey: 'scheduleDeviationLevel' },\n  { label: '총 건설 폐기물 발생량', projectKey: 'totalConstructionWasteAmount' },\n  { label: '용적율', projectKey: 'floorAreaRatio' },\n  { label: '총 설계 변경 건', projectKey: 'designChangeCount' },\n  { label: '공사비', projectKey: 'constructionCost' },\n  { label: '연면적', projectKey: 'area' },\n  { label: '지상층수', projectKey: 'upperFloorCount' },\n  { label: '지하층수', projectKey: 'lowerFloorCount' }\n]\n\n@customElement('sv-pc-tab1-plan')\nexport class SvProjectCompleteTab1Plan extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      .title {\n        color: #212529;\n        font-size: 13px;\n        font-weight: 400;\n        line-height: 24px;\n        text-align: center;\n      }\n\n      .rows {\n        display: flex;\n        flex-direction: column;\n        padding: 8px 6px;\n      }\n      .row.header {\n        min-height: 35px;\n        background: #f3f3fa;\n        border-top: 2px #0c4da2 solid;\n        grid-template-columns: 220px 1fr 1fr 200px;\n        padding: 0px 25px;\n\n        .header-label {\n          color: #212529;\n          text-align: center;\n        }\n      }\n      .row {\n        display: grid;\n        grid-template-columns: 220px 1fr 1fr 200px;\n        gap: 6px 10px;\n        align-items: center;\n        padding: 8px 25px;\n        border-bottom: 1px rgba(0, 0, 0, 0.1) solid;\n\n        .cell {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n      }\n      .label {\n        color: #35618e;\n        font-size: 16px;\n        letter-spacing: -0.05em;\n        white-space: nowrap;\n        display: flex;\n        justify-content: center;\n      }\n      input {\n        padding: 6px 8px;\n        border: 1px solid rgba(0, 0, 0, 0.1);\n        border-radius: 5px;\n        background: #ffffff;\n        color: #212529;\n        font-size: 16px;\n        margin-right: 5px;\n\n        &:disabled {\n          background: #f6f6f6;\n        }\n      }\n      .unit {\n        text-align: center;\n        color: #212529;\n      }\n      .plus {\n        color: #e13232;\n        font-weight: 700;\n      }\n      .minus {\n        color: #1e88e5;\n        font-weight: 700;\n      }\n      .button-line {\n        display: flex;\n        justify-content: center;\n        gap: 10px;\n        margin-top: 16px;\n      }\n      .ghost-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        padding: 6px 10px;\n        background: #35618e;\n        color: #ffffff;\n        border-radius: 5px;\n        cursor: pointer;\n      }\n      .ghost-btn.secondary {\n        background: #24be7b;\n      }\n    `\n  ]\n\n  @property({ type: Array }) kpiMetricValues: any = []\n  @property({ type: Array }) kpiMetrics: any = []\n  @property({ type: Object }) project: any = {}\n\n  render() {\n    return html`\n      <div class=\"title\">\n        <div>\n          당초 계획 대비 실제 진행 과정에서 변동된 공사비, 공기(공사기간), 면적, 기타 주요 항목을 현실에 맞게 수정·입력합니다.\n          <br />이 정보는 성과 분석, KPI 평가, 통계 산출 등에 기준값으로 사용되므로, 가능한 한 실제 값 기준으로 정확히\n          입력해주시기 바랍니다.\n        </div>\n      </div>\n\n      <div class=\"rows\">\n        <div class=\"row header\">\n          <div class=\"header-label\">기본정보</div>\n          <div class=\"header-label\">계획</div>\n          <div class=\"header-label\">실제</div>\n          <div class=\"header-label\">편차</div>\n        </div>\n\n        ${this.kpiMetrics.map(metric => {\n          // 상수로 정의된 매핑 정보에서 metric.name으로 projectKey를 찾음\n          const projectKey = KPI_METRIC_KEY_MAPPING.find(item => item.label === metric.name)?.projectKey || ''\n          const kpiMetricValue = this.kpiMetricValues.find((item: any) => item.metricId === metric.id) || {}\n\n          // planValue는 project에서 찾고 없으면 buildingComplex의 값에서 찾음\n          let planValue = this.project[projectKey] || this.project?.buildingComplex?.[projectKey] || 0\n\n          // 공사기간은 기간을 일 단위로 계산\n          if (projectKey === 'constructionPeriod') {\n            planValue = calcDateDiff(this.project.startDate, this.project.endDate)\n          }\n\n          const diffValue = calcDiff(planValue, kpiMetricValue.value)\n          const diffClass = diffValue === 0 ? '' : diffValue > 0 ? 'plus' : 'minus'\n          const diffSign = diffValue === 0 ? '' : diffValue > 0 ? '+' : '-'\n\n          const unit = kpiMetricValue.unit || metric.unit || ''\n\n          return html`<div class=\"row\">\n            <div class=\"label\">• ${metric.name}</div>\n            <div class=\"cell\"><input .value=${planValue} disabled /> ${unit}</div>\n            <div class=\"cell\">\n              <input numeric .value=${kpiMetricValue.value || 0} @input=${(e: InputEvent) => this._onInputChange(e, metric)} />\n              ${unit}\n            </div>\n            <div class=\"unit ${diffClass}\">${diffSign} ${Math.abs(diffValue).toLocaleString()} ${unit}</div>\n          </div>`\n        })}\n\n        <div class=\"button-line\">\n          <div class=\"ghost-btn\" @click=${this._reset}>초기화</div>\n          <div class=\"ghost-btn secondary\" @click=${() => this._save()}>저장</div>\n        </div>\n      </div>\n    `\n  }\n\n  willUpdate(changedProperties: Map<string, any>) {\n    super.willUpdate(changedProperties)\n\n    // project가 변경되고, project.id가 존재하면 데이터 로드\n    if (changedProperties.has('project') && this.project?.id) {\n      this._getInitData()\n    }\n  }\n\n  private async _getInitData() {\n    const kpiMetrics = await getKpiMetrics()\n    this.kpiMetrics = kpiMetrics.filter(item => !item.name.includes('평가')) || [] // 평가 텍스트가 들어간건 제외\n    this.kpiMetricValues = await getKpiMetricValues(this.project.id)\n  }\n\n  // Input 요소의 값이 변경될 때 호출되는 콜백 함수\n  private _onInputChange(event: InputEvent, metric: any) {\n    const target = event.target as HTMLInputElement\n    let inputVal: any = target.value\n\n    // 숫자 타입은 다른 문자 입력 제거\n    if (target.hasAttribute('numeric')) {\n      inputVal = Number(inputVal.replace(/[^\\d.]/g, ''))\n    }\n\n    // 기존 배열에서 해당 id를 가진 항목을 찾음\n    const existingItemIndex = this.kpiMetricValues.findIndex((item: any) => item.metricId === metric.id)\n\n    if (existingItemIndex !== -1) {\n      // 기존 항목이 있으면 업데이트\n      this.kpiMetricValues = this.kpiMetricValues.map((item: any) =>\n        item.metricId === metric.id ? { ...item, value: inputVal } : item\n      )\n    } else {\n      // 기존 항목이 없으면 새로 추가\n      this.kpiMetricValues = [\n        ...this.kpiMetricValues,\n        {\n          id: crypto.randomUUID(),\n          value: inputVal,\n          metricId: metric.id,\n          unit: metric.unit || '',\n          org: this.project.id, // 프로젝트 ID 추가\n          periodType: metric.periodType,\n          valueDate: moment().tz('Asia/Seoul').format('YYYY-MM-DD')\n        }\n      ]\n    }\n  }\n\n  private async _save() {\n    const response = await updateProjectCompleteStep1(this.kpiMetricValues)\n    if (!response.errors) {\n      notify({ message: '저장되었습니다.' })\n    }\n  }\n\n  private _reset() {\n    this._getInitData()\n  }\n}\n"]}

package/dist-client/pages/project-complete-tabs/pc-tab2-rating.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+export declare class SvProjectCompleteTab2Rating extends LitElement {
+    static styles: import("lit").CSSResult[];
+    kpiCategories: any;
+    kpiMetrics: any;
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    private _getInitData;
+    private _setRatingHalf;
+    private _save;
+    private _reset;
+}

package/dist-client/pages/project-complete-tabs/pc-tab2-rating.js

@@ -0,0 +1,242 @@
+import { __decorate, __metadata } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { calcDiff } from '../../shared/func';
+import { getKpiCategories, getKpiMetrics, updateProjectCompleteStep2 } from '../../shared/complete-api';
+import { notify } from '@operato/layout';
+let SvProjectCompleteTab2Rating = class SvProjectCompleteTab2Rating extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.kpiCategories = [];
+        this.kpiMetrics = [];
+    }
+    render() {
+        return html `
+      <div class="title">
+        <div>
+          당초 계획 대비 실제 진행 과정에서 변동된 공사비, 공기(공사기간), 면적, 기타 주요 항목을 현실에 맞게 수정·입력합니다.
+          <br />이 정보는 성과 분석, KPI 평가, 통계 산출 등에 기준값으로 사용되므로, 가능한 한 실제 값 기준으로 정확히
+          입력해주시기 바랍니다.
+        </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.kpiCategories.map((item, idx) => {
+            const completeScore = this.kpiMetrics.find(v => v.id === item.id);
+            const diff = calcDiff(item.value, completeScore === null || completeScore === void 0 ? void 0 : completeScore.value);
+            const diffClass = diff === 0 ? '' : diff > 0 ? 'plus' : 'minus';
+            const diffSign = diff === 0 ? '' : diff > 0 ? '+' : '-';
+            return html `
+            <div class="row">
+              <div class="label">• ${item.name}</div>
+              <div class="cell">${(item === null || item === void 0 ? void 0 : item.value) || 0}</div>
+              <div class="stars" @mouseleave=${() => { }}>
+                ${[1, 2, 3, 4, 5].map(starIndex => {
+                var _a;
+                const score10 = Number((_a = completeScore === null || completeScore === void 0 ? void 0 : completeScore.value) !== null && _a !== void 0 ? _a : 0); // 0~10
+                const fullUntil = Math.floor(score10 / 2); // 정수 별 개수
+                const hasHalf = score10 % 2 === 1;
+                const fillForThis = starIndex <= fullUntil ? 100 : starIndex === fullUntil + 1 && hasHalf ? 44 : 0;
+                return html `
+                    <span class="star-wrap">
+                      <span class="star-base">☆</span>
+                      <span class="star-fill" style="width: ${fillForThis}%;">★</span>
+                      <span class="click-half left" @click=${() => this._setRatingHalf(item.id, (starIndex - 1) * 2 + 1)}></span>
+                      <span class="click-half right" @click=${() => this._setRatingHalf(item.id, starIndex * 2)}></span>
+                    </span>
+                  `;
+            })}
+              </div>
+              <div class="unit ${diffClass}">${diffSign} ${Math.abs(diff).toLocaleString()}</div>
+            </div>
+          `;
+        })}
+
+        <div class="button-line">
+          <div class="ghost-btn" @click=${this._reset}>초기화</div>
+          <div class="ghost-btn secondary" @click=${() => this._save()}>저장</div>
+        </div>
+      </div>
+    `;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._getInitData();
+    }
+    async _getInitData() {
+        const kpiMetrics = await getKpiMetrics();
+        this.kpiMetrics = kpiMetrics.filter(item => !item.name.includes('평가')) || []; // 평가 텍스트가 들어간건 제외
+        this.kpiCategories = await getKpiCategories();
+    }
+    _setRatingHalf(itemId, score10) {
+        // score10: 0~10, 0.5 단위
+        const next = Array.isArray(this.kpiMetrics) ? [...this.kpiMetrics] : [];
+        const idx = next.findIndex((v) => v.id === itemId);
+        if (idx >= 0)
+            next[idx] = Object.assign(Object.assign({}, next[idx]), { value: score10 });
+        else
+            next.push({ id: itemId, value: score10 });
+        this.kpiMetrics = next;
+        this.dispatchEvent(new CustomEvent('complete-data-change', { detail: { tab: 2, data: this.kpiMetrics } }));
+    }
+    async _save() {
+        const response = await updateProjectCompleteStep2(this.kpiCategories);
+        if (!response.errors) {
+            notify({ message: '저장되었습니다.' });
+        }
+    }
+    _reset() {
+        this._getInitData();
+    }
+};
+SvProjectCompleteTab2Rating.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: 300px 1fr 1fr 200px;
+        padding: 0px 25px;
+
+        .header-label {
+          color: #212529;
+          text-align: center;
+        }
+      }
+      .row {
+        display: grid;
+        grid-template-columns: 300px 1fr 1fr 200px;
+        gap: 6px 10px;
+        padding: 8px 25px;
+        align-items: center;
+        border-bottom: 1px rgba(0, 0, 0, 0.1) solid;
+
+        .cell {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+      }
+      .label {
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+        white-space: nowrap;
+        display: flex;
+        justify-content: center;
+      }
+      .stars {
+        display: inline-flex;
+        gap: 6px;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+      .star-wrap {
+        position: relative;
+        width: 28px;
+        height: 28px;
+        display: inline-block;
+      }
+      .star-base,
+      .star-fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        font-size: 28px;
+        line-height: 28px;
+        user-select: none;
+      }
+      .star-base {
+        color: #d0d7e2;
+      }
+      .star-fill {
+        color: #ffb400;
+        overflow: hidden;
+        width: 0%;
+      }
+      .click-half {
+        position: absolute;
+        top: 0;
+        width: 50%;
+        height: 100%;
+      }
+      .click-half.left {
+        left: 0;
+      }
+      .click-half.right {
+        right: 0;
+      }
+      .score {
+        color: #212529;
+        text-align: right;
+      }
+      .plus {
+        color: #e13232;
+        font-weight: 700;
+      }
+      .minus {
+        color: #1e88e5;
+        font-weight: 700;
+      }
+      .unit {
+        text-align: center;
+        color: #212529;
+      }
+      .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;
+      }
+    `
+];
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab2Rating.prototype, "kpiCategories", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Object)
+], SvProjectCompleteTab2Rating.prototype, "kpiMetrics", void 0);
+SvProjectCompleteTab2Rating = __decorate([
+    customElement('sv-pc-tab2-rating')
+], SvProjectCompleteTab2Rating);
+export { SvProjectCompleteTab2Rating };
+//# sourceMappingURL=pc-tab2-rating.js.map

package/dist-client/pages/project-complete-tabs/pc-tab2-rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pc-tab2-rating.js","sourceRoot":"","sources":["../../../client/pages/project-complete-tabs/pc-tab2-rating.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { calcDiff } from '../../shared/func'\nimport { getKpiCategories, getKpiMetrics, updateProjectCompleteStep2 } from '../../shared/complete-api'\nimport { notify } from '@operato/layout'\n\n@customElement('sv-pc-tab2-rating')\nexport class SvProjectCompleteTab2Rating extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      .title {\n        color: #212529;\n        font-size: 13px;\n        font-weight: 400;\n        line-height: 24px;\n        text-align: center;\n      }\n\n      .rows {\n        display: flex;\n        flex-direction: column;\n        padding: 8px 6px;\n      }\n      .row.header {\n        min-height: 35px;\n        background: #f3f3fa;\n        border-top: 2px #0c4da2 solid;\n        grid-template-columns: 300px 1fr 1fr 200px;\n        padding: 0px 25px;\n\n        .header-label {\n          color: #212529;\n          text-align: center;\n        }\n      }\n      .row {\n        display: grid;\n        grid-template-columns: 300px 1fr 1fr 200px;\n        gap: 6px 10px;\n        padding: 8px 25px;\n        align-items: center;\n        border-bottom: 1px rgba(0, 0, 0, 0.1) solid;\n\n        .cell {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n      }\n      .label {\n        color: #35618e;\n        font-size: 16px;\n        letter-spacing: -0.05em;\n        white-space: nowrap;\n        display: flex;\n        justify-content: center;\n      }\n      .stars {\n        display: inline-flex;\n        gap: 6px;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n      }\n      .star-wrap {\n        position: relative;\n        width: 28px;\n        height: 28px;\n        display: inline-block;\n      }\n      .star-base,\n      .star-fill {\n        position: absolute;\n        top: 0;\n        left: 0;\n        font-size: 28px;\n        line-height: 28px;\n        user-select: none;\n      }\n      .star-base {\n        color: #d0d7e2;\n      }\n      .star-fill {\n        color: #ffb400;\n        overflow: hidden;\n        width: 0%;\n      }\n      .click-half {\n        position: absolute;\n        top: 0;\n        width: 50%;\n        height: 100%;\n      }\n      .click-half.left {\n        left: 0;\n      }\n      .click-half.right {\n        right: 0;\n      }\n      .score {\n        color: #212529;\n        text-align: right;\n      }\n      .plus {\n        color: #e13232;\n        font-weight: 700;\n      }\n      .minus {\n        color: #1e88e5;\n        font-weight: 700;\n      }\n      .unit {\n        text-align: center;\n        color: #212529;\n      }\n      .button-line {\n        display: flex;\n        justify-content: center;\n        gap: 10px;\n        margin-top: 16px;\n      }\n      .ghost-btn {\n        display: inline-flex;\n        align-items: center;\n        gap: 6px;\n        padding: 6px 10px;\n        background: #35618e;\n        color: #ffffff;\n        border-radius: 5px;\n        cursor: pointer;\n      }\n      .ghost-btn.secondary {\n        background: #24be7b;\n      }\n    `\n  ]\n\n  @property({ type: Array }) kpiCategories: any = []\n  @property({ type: Array }) kpiMetrics: any = []\n\n  render() {\n    return html`\n      <div class=\"title\">\n        <div>\n          당초 계획 대비 실제 진행 과정에서 변동된 공사비, 공기(공사기간), 면적, 기타 주요 항목을 현실에 맞게 수정·입력합니다.\n          <br />이 정보는 성과 분석, KPI 평가, 통계 산출 등에 기준값으로 사용되므로, 가능한 한 실제 값 기준으로 정확히\n          입력해주시기 바랍니다.\n        </div>\n      </div>\n\n      <div class=\"rows\">\n        <div class=\"row header\">\n          <div class=\"header-label\">성과영역</div>\n          <div class=\"header-label\">기존 월간 수준 평가 평균</div>\n          <div class=\"header-label\">완료 평가</div>\n          <div class=\"header-label\">편차</div>\n        </div>\n\n        ${this.kpiCategories.map((item, idx) => {\n          const completeScore = this.kpiMetrics.find(v => v.id === item.id)\n          const diff = calcDiff(item.value, completeScore?.value)\n          const diffClass = diff === 0 ? '' : diff > 0 ? 'plus' : 'minus'\n          const diffSign = diff === 0 ? '' : diff > 0 ? '+' : '-'\n\n          return html`\n            <div class=\"row\">\n              <div class=\"label\">• ${item.name}</div>\n              <div class=\"cell\">${item?.value || 0}</div>\n              <div class=\"stars\" @mouseleave=${() => {}}>\n                ${[1, 2, 3, 4, 5].map(starIndex => {\n                  const score10 = Number(completeScore?.value ?? 0) // 0~10\n                  const fullUntil = Math.floor(score10 / 2) // 정수 별 개수\n                  const hasHalf = score10 % 2 === 1\n                  const fillForThis = starIndex <= fullUntil ? 100 : starIndex === fullUntil + 1 && hasHalf ? 44 : 0\n\n                  return html`\n                    <span class=\"star-wrap\">\n                      <span class=\"star-base\">☆</span>\n                      <span class=\"star-fill\" style=\"width: ${fillForThis}%;\">★</span>\n                      <span class=\"click-half left\" @click=${() => this._setRatingHalf(item.id, (starIndex - 1) * 2 + 1)}></span>\n                      <span class=\"click-half right\" @click=${() => this._setRatingHalf(item.id, starIndex * 2)}></span>\n                    </span>\n                  `\n                })}\n              </div>\n              <div class=\"unit ${diffClass}\">${diffSign} ${Math.abs(diff).toLocaleString()}</div>\n            </div>\n          `\n        })}\n\n        <div class=\"button-line\">\n          <div class=\"ghost-btn\" @click=${this._reset}>초기화</div>\n          <div class=\"ghost-btn secondary\" @click=${() => this._save()}>저장</div>\n        </div>\n      </div>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this._getInitData()\n  }\n\n  private async _getInitData() {\n    const kpiMetrics = await getKpiMetrics()\n    this.kpiMetrics = kpiMetrics.filter(item => !item.name.includes('평가')) || [] // 평가 텍스트가 들어간건 제외\n    this.kpiCategories = await getKpiCategories()\n  }\n\n  private _setRatingHalf(itemId: string, score10: number) {\n    // score10: 0~10, 0.5 단위\n    const next = Array.isArray(this.kpiMetrics) ? [...this.kpiMetrics] : []\n    const idx = next.findIndex((v: any) => v.id === itemId)\n    if (idx >= 0) next[idx] = { ...next[idx], value: score10 }\n    else next.push({ id: itemId, value: score10 })\n\n    this.kpiMetrics = next\n    this.dispatchEvent(new CustomEvent('complete-data-change', { detail: { tab: 2, data: this.kpiMetrics } }))\n  }\n\n  private async _save() {\n    const response = await updateProjectCompleteStep2(this.kpiCategories)\n    if (!response.errors) {\n      notify({ message: '저장되었습니다.' })\n    }\n  }\n\n  private _reset() {\n    this._getInitData()\n  }\n}\n"]}

package/dist-client/pages/project-complete-tabs/pc-tab3-upload.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+export declare class SvProjectCompleteTab3Upload extends LitElement {
+    static styles: import("lit").CSSResult[];
+    project: any;
+    attachment: any;
+    private pendingFile;
+    render(): import("lit-html").TemplateResult<1>;
+    willUpdate(changedProperties: Map<string, any>): void;
+    private _getCurrentFile;
+    private _save;
+    private _removeFile;
+    private _reset;
+    private _onFileSelect;
+    private _uploadFile;
+}