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

package/dist-client/pages/sv-project-detail.js

@@ -0,0 +1,558 @@
+import { __decorate, __metadata } from "tslib";
+import { navigate, PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { PROJECT_STATE } from './sv-project-list';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+import '../components/kpi-boxplot-chart';
+import '../components/kpi-single-boxplot-chart';
+import '../components/kpi-radar-chart';
+let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.project = {};
+    }
+    get context() {
+        return {
+            title: '프로젝트 상세 정보'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return html `
+      <div content>
+        <div left>
+          <div class="card">
+            <div class="card-title">
+              <div>${this.project.name}</div>
+              <div class="triangle"></div>
+            </div>
+
+            <div class="top-info" style="margin-top: 10px;">
+              <img pic src=${((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath) || '/assets/images/no-image.png'} alt="project" />
+              <div class="info">
+                <div class="address">• ${(_b = this.project.buildingComplex) === null || _b === void 0 ? void 0 : _b.address}</div>
+                <div class="row">
+                  <div class="label">• 공사기간</div>
+                  <div class="value">${this.project.startDate} ~ ${this.project.endDate}</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 현장상태</div>
+                  <div class="value status-value">${PROJECT_STATE[this.project.state]}</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 요청상세</div>
+                  <div class="value bold">???</div>
+                </div>
+                <div class="row">
+                  <div class="label">• 알람</div>
+                  <div class="value">???</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="detail-grid">
+              <div class="grid-item row">
+                <div class="label">• 공사비</div>
+                <div class="value">${((_d = (_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.constructionCost) === null || _d === void 0 ? void 0 : _d.toLocaleString()) || '-'} 원</div>
+              </div>
+              <div class="grid-item row">
+                <div class="label">• 연면적</div>
+                <div class="value">${((_f = (_e = this.project.buildingComplex) === null || _e === void 0 ? void 0 : _e.area) === null || _f === void 0 ? void 0 : _f.toLocaleString()) || '-'} ㎡</div>
+              </div>
+              <div class="grid-item row">
+                <div class="label">• 용적률</div>
+                <div class="value">??? %</div>
+              </div>
+              <div class="grid-item row">
+                <div class="label">• 투입인력</div>
+                <div class="value">??? 명</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="card">
+            <div class="card-title">
+              <div>입력 대기 중</div>
+              <div class="triangle"></div>
+            </div>
+            <div class="sub-desc">
+              현재 입력 기한이 도래했거나, 입력이 지연되고 있는 KPI 항목입니다. 해당 항목에 대한 데이터를 입력 해 주시기 바랍니다.
+            </div>
+
+            <div class="list-block">
+              <div class="list-title">• 입력 대기 중 2건</div>
+              <div class="list-text"># 2033312-Y5.1 : 검수자재 불합격률</div>
+              <div class="list-text"># 2033312-Y5.1 : 품질시험 불합격 건수</div>
+            </div>
+            <div class="list-block">
+              <div class="list-title">• 입력 기한 초과 1건</div>
+              <div class="list-text">
+                # 2033312-Y5.2 : 검측 불합격률 <span class="warn">2025.2.12 <md-icon>report</md-icon></span>
+              </div>
+            </div>
+            <div class="list-block">
+              <div class="list-title">• 입력 예정 4건</div>
+              <div class="list-text"># 2033320-Y4.32 : 연면적 대비 공기입력</div>
+              <div class="list-text"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>
+              <div class="list-text"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>
+              <div class="list-text"># 2096412-Y5.31 : 현장별 일정 이탈 수준</div>
+            </div>
+            <div class="list-block">
+              <div class="list-title">• 입력 기한 없음 3건</div>
+              <div class="list-text"># 2033320-Y4.32 : 연면적 대비 공기입력</div>
+              <div class="list-text"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>
+              <div class="list-text"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>
+            </div>
+          </div>
+        </div>
+
+        <div right>
+          ${html `
+            <div class="button-line">
+              <div class="ghost-btn" @click=${() => navigate(`project-update/${this.project.id}`)}>
+                <md-icon slot="">assignment</md-icon>
+                <div>프로젝트 수정</div>
+              </div>
+              <div class="ghost-btn" @click=${() => navigate(`project-complete/${this.project.id}`)}>
+                <md-icon slot="">assignment_turned_in</md-icon>
+                <div>프로젝트 완공 처리</div>
+              </div>
+            </div>
+          `}
+
+          <div class="card kpi-box">
+            <div class="kpi-header">
+              <div>
+                <div>종합 KPI</div>
+                <div class="triangle"></div>
+              </div>
+              <div class="kpi-desc">프로젝트의 6개 성과를 종합한 종합 KPI포인트와 각 지표별 분포</div>
+            </div>
+
+            <div class="kpi-summary">
+              <div class="mini-boxplot" title="boxplot placeholder">
+                <div class="boxplot-area">
+                  <kpi-single-boxplot-chart
+                    .data=${{
+            min: 0,
+            max: 100,
+            mean: 50,
+            median: 60,
+            q1: 25,
+            q3: 75,
+            value: this.project.kpi
+        }}
+                  ></kpi-single-boxplot-chart>
+                </div>
+
+                <div class="boxplot-point">
+                  <div class="value">${(_h = (_g = this.project.kpi) === null || _g === void 0 ? void 0 : _g.toFixed(1)) !== null && _h !== void 0 ? _h : '-'}</div>
+                  <div class="label">Point</div>
+                </div>
+              </div>
+
+              <div class="spider-area">
+                <kpi-radar-chart
+                  .data=${[
+            {
+                group: '평균',
+                category: '생산성 성과',
+                value: 41
+            },
+            {
+                group: '평균',
+                category: '일정 성과',
+                value: 26
+            },
+            {
+                group: '평균',
+                category: '비용 성과',
+                value: 30
+            },
+            {
+                group: '평균',
+                category: '품질 성과',
+                value: 21
+            },
+            {
+                group: '평균',
+                category: '안전 성과',
+                value: 33
+            },
+            {
+                group: '평균',
+                category: '환경 성과',
+                value: 15
+            }
+        ]}
+                  .categories=${['생산성 성과', '일정 성과', '비용 성과', '품질 성과', '안전 성과', '환경 성과']}
+                  .currentGroup=${'평균'}
+                ></kpi-radar-chart>
+              </div>
+            </div>
+          </div>
+
+          <div class="card group-box">
+            <div class="kpi-header">
+              <div>그룹별 분포</div>
+              <div class="triangle"></div>
+            </div>
+            <div class="desc">
+              Boxplot(박스플롯)은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치 등)를 보여줍니다.
+              박스는 중앙 50% 구간, 수염은 전체 범위, 굵은 검정색 가로선은 중앙값(메디안), 초록색 원은 평균값(Mean)을 의미합니다.
+              이 프로젝트의 값은 진한 오렌지색 원으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수 있습니다.
+            </div>
+            <div class="group-chart"></div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            await this.initProject(lifecycle.resourceId);
+        }
+    }
+    async initProject(projectId = '') {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query Project($id: String!) {
+          project(id: $id) {
+            id
+            name
+            state
+            startDate
+            endDate
+            projectType
+            mainPhoto {
+              fullpath
+            }
+            totalProgress
+            weeklyProgress
+            kpi
+            inspPassRate
+            robotProgressRate
+            structuralSafetyRate
+            robotCount
+            buildingComplex {
+              id
+              address
+              latitude
+              longitude
+              area
+              clientCompany
+              constructionCompany
+              supervisoryCompany
+              designCompany
+              drawing {
+                id
+                name
+                fullpath
+              }
+              constructionType
+              constructionCost
+              etc
+              notice
+              householdCount
+              buildingCount
+              virtualTourLink
+              buildings {
+                id
+                name
+                floorCount
+              }
+            }
+          }
+        }
+      `,
+            variables: { id: projectId }
+        });
+        if (response.errors)
+            return;
+        this.project = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.project) || {};
+    }
+};
+SvProjectDetailPage.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+
+        width: 100%;
+        height: 100%;
+        background-color: var(--md-sys-color-background, #f6f6f6);
+      }
+
+      /* content layout */
+      div[content] {
+        display: flex;
+        gap: 35px;
+        padding: 25px;
+      }
+      div[left] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+      }
+      div[right] {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        padding: 0 1px;
+      }
+
+      /* card */
+      .card {
+        background: #ffffff;
+        border-radius: 10px;
+        padding: 15px;
+        box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);
+      }
+      .card-title {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        color: #35618e;
+        font-weight: 700;
+      }
+      .triangle {
+        width: 0;
+        height: 0;
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-top: 8px solid #35618e;
+      }
+
+      /* left top info box */
+      .bold {
+        font-weight: bold;
+      }
+      .top-info {
+        display: flex;
+        gap: 10px;
+      }
+      .top-info img[pic] {
+        width: 284px;
+        height: 160px;
+        object-fit: fill;
+        background: #e5e7eb;
+      }
+      .top-info .info {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        padding: 10px 0;
+        flex: 1;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .label {
+        min-width: fit-content;
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+      }
+      .value {
+        color: #212529;
+        font-size: 16px;
+      }
+      .status-value {
+        color: #4cbb49;
+        font-weight: 700;
+      }
+
+      .address {
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+      }
+
+      .detail-grid {
+        display: grid;
+        grid-template-columns: 284px 1fr;
+        gap: 15px 10px;
+        padding: 5px 0;
+      }
+      .detail-grid .grid-item .label {
+        width: auto;
+      }
+
+      /* left second card (requests) */
+      .sub-desc {
+        color: #35618e;
+        font-size: 14px;
+        letter-spacing: -0.05em;
+        margin-bottom: 8px;
+      }
+      .list-block {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        padding: 5px 25px;
+      }
+      .list-title {
+        color: #212529;
+        font-weight: 700;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+      }
+      .list-text {
+        color: #35618e;
+        font-size: 16px;
+        letter-spacing: -0.05em;
+        margin-left: 8px;
+      }
+      .list-text .warn {
+        margin-left: 10px;
+        color: #e13232;
+
+        md-icon {
+          font-size: 17px;
+          width: 13px;
+          height: 13px;
+        }
+      }
+
+      /* right buttons */
+      .button-line {
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+      }
+      .ghost-btn {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        padding: 5px 10px;
+        background: #35618e;
+        color: #ffffff;
+        border-radius: 5px;
+        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+
+        /* Material Symbols Outlined (stroke style) */
+        md-icon {
+          font-variation-settings:
+            'FILL' 0,
+            'wght' 300,
+            'GRAD' 0,
+            'opsz' 24;
+        }
+      }
+
+      /* right KPI box */
+      .kpi-box {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 15px;
+        max-height: 420px;
+        min-width: 560px;
+      }
+      .kpi-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #35618e;
+        font-weight: 700;
+        font-size: 20px;
+        letter-spacing: -0.05em;
+      }
+      .kpi-header div {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+      .kpi-desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+      }
+      .kpi-summary {
+        display: flex;
+        align-items: center;
+        padding: 0 30px;
+        max-height: 360px;
+      }
+      .mini-boxplot {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        position: relative;
+        min-width: 120px;
+      }
+      .boxplot-area {
+        flex: 1;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background: #ffffff;
+      }
+
+      .boxplot-point {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #35618e;
+      }
+      .boxplot-point .value {
+        font-size: 42px;
+        font-weight: 800;
+        color: #35618e;
+        border-radius: 6px;
+      }
+      .boxplot-point .label {
+        font-size: 14px;
+        font-weight: 300;
+        width: auto;
+      }
+
+      /* spider chart placeholder */
+      .spider-area {
+        flex: 5;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        height: 100%;
+      }
+
+      /* group distribution */
+      .group-box .desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+        margin-top: 4px;
+      }
+      .group-chart {
+        height: 205px;
+        margin-top: 25px;
+      }
+
+      kpi-single-boxplot-chart {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], SvProjectDetailPage.prototype, "project", void 0);
+SvProjectDetailPage = __decorate([
+    customElement('sv-project-detail')
+], SvProjectDetailPage);
+export { SvProjectDetailPage };
+//# sourceMappingURL=sv-project-detail.js.map

package/dist-client/pages/sv-project-detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sv-project-detail.js","sourceRoot":"","sources":["../../client/pages/sv-project-detail.ts"],"names":[],"mappings":"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","sourcesContent":["import { navigate, PageLifecycle, PageView } from '@operato/shell'\nimport { css, html } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements'\nimport { Project, PROJECT_STATE, ProjectState } from './sv-project-list'\nimport { client } from '@operato/graphql'\nimport gql from 'graphql-tag'\nimport '../components/kpi-boxplot-chart'\nimport '../components/kpi-single-boxplot-chart'\nimport '../components/kpi-radar-chart'\n\n@customElement('sv-project-detail')\nexport class SvProjectDetailPage extends ScopedElementsMixin(PageView) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        overflow-y: auto;\n\n        width: 100%;\n        height: 100%;\n        background-color: var(--md-sys-color-background, #f6f6f6);\n      }\n\n      /* content layout */\n      div[content] {\n        display: flex;\n        gap: 35px;\n        padding: 25px;\n      }\n      div[left] {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n      }\n      div[right] {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        gap: 20px;\n        padding: 0 1px;\n      }\n\n      /* card */\n      .card {\n        background: #ffffff;\n        border-radius: 10px;\n        padding: 15px;\n        box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1);\n      }\n      .card-title {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        color: #35618e;\n        font-weight: 700;\n      }\n      .triangle {\n        width: 0;\n        height: 0;\n        border-left: 6px solid transparent;\n        border-right: 6px solid transparent;\n        border-top: 8px solid #35618e;\n      }\n\n      /* left top info box */\n      .bold {\n        font-weight: bold;\n      }\n      .top-info {\n        display: flex;\n        gap: 10px;\n      }\n      .top-info img[pic] {\n        width: 284px;\n        height: 160px;\n        object-fit: fill;\n        background: #e5e7eb;\n      }\n      .top-info .info {\n        display: flex;\n        flex-direction: column;\n        gap: 15px;\n        padding: 10px 0;\n        flex: 1;\n      }\n      .row {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n      .label {\n        min-width: fit-content;\n        color: #35618e;\n        font-size: 16px;\n        letter-spacing: -0.05em;\n      }\n      .value {\n        color: #212529;\n        font-size: 16px;\n      }\n      .status-value {\n        color: #4cbb49;\n        font-weight: 700;\n      }\n\n      .address {\n        color: #35618e;\n        font-size: 16px;\n        letter-spacing: -0.05em;\n      }\n\n      .detail-grid {\n        display: grid;\n        grid-template-columns: 284px 1fr;\n        gap: 15px 10px;\n        padding: 5px 0;\n      }\n      .detail-grid .grid-item .label {\n        width: auto;\n      }\n\n      /* left second card (requests) */\n      .sub-desc {\n        color: #35618e;\n        font-size: 14px;\n        letter-spacing: -0.05em;\n        margin-bottom: 8px;\n      }\n      .list-block {\n        display: flex;\n        flex-direction: column;\n        gap: 5px;\n        padding: 5px 25px;\n      }\n      .list-title {\n        color: #212529;\n        font-weight: 700;\n        font-size: 16px;\n        letter-spacing: -0.05em;\n      }\n      .list-text {\n        color: #35618e;\n        font-size: 16px;\n        letter-spacing: -0.05em;\n        margin-left: 8px;\n      }\n      .list-text .warn {\n        margin-left: 10px;\n        color: #e13232;\n\n        md-icon {\n          font-size: 17px;\n          width: 13px;\n          height: 13px;\n        }\n      }\n\n      /* right buttons */\n      .button-line {\n        display: flex;\n        justify-content: flex-end;\n        gap: 10px;\n      }\n      .ghost-btn {\n        display: flex;\n        align-items: center;\n        gap: 3px;\n        padding: 5px 10px;\n        background: #35618e;\n        color: #ffffff;\n        border-radius: 5px;\n        box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);\n        cursor: pointer;\n\n        /* Material Symbols Outlined (stroke style) */\n        md-icon {\n          font-variation-settings:\n            'FILL' 0,\n            'wght' 300,\n            'GRAD' 0,\n            'opsz' 24;\n        }\n      }\n\n      /* right KPI box */\n      .kpi-box {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: 15px;\n        max-height: 420px;\n        min-width: 560px;\n      }\n      .kpi-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        color: #35618e;\n        font-weight: 700;\n        font-size: 20px;\n        letter-spacing: -0.05em;\n      }\n      .kpi-header div {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n      }\n      .kpi-desc {\n        color: #35618e;\n        font-size: 13px;\n        letter-spacing: -0.05em;\n      }\n      .kpi-summary {\n        display: flex;\n        align-items: center;\n        padding: 0 30px;\n        max-height: 360px;\n      }\n      .mini-boxplot {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n        position: relative;\n        min-width: 120px;\n      }\n      .boxplot-area {\n        flex: 1;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        background: #ffffff;\n      }\n\n      .boxplot-point {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        color: #35618e;\n      }\n      .boxplot-point .value {\n        font-size: 42px;\n        font-weight: 800;\n        color: #35618e;\n        border-radius: 6px;\n      }\n      .boxplot-point .label {\n        font-size: 14px;\n        font-weight: 300;\n        width: auto;\n      }\n\n      /* spider chart placeholder */\n      .spider-area {\n        flex: 5;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n        height: 100%;\n      }\n\n      /* group distribution */\n      .group-box .desc {\n        color: #35618e;\n        font-size: 13px;\n        letter-spacing: -0.05em;\n        margin-top: 4px;\n      }\n      .group-chart {\n        height: 205px;\n        margin-top: 25px;\n      }\n\n      kpi-single-boxplot-chart {\n        flex: 1;\n      }\n    `\n  ]\n\n  get context() {\n    return {\n      title: '프로젝트 상세 정보'\n    }\n  }\n\n  @state() private project: Project = {} as Project\n\n  render() {\n    return html`\n      <div content>\n        <div left>\n          <div class=\"card\">\n            <div class=\"card-title\">\n              <div>${this.project.name}</div>\n              <div class=\"triangle\"></div>\n            </div>\n\n            <div class=\"top-info\" style=\"margin-top: 10px;\">\n              <img pic src=${this.project.mainPhoto?.fullpath || '/assets/images/no-image.png'} alt=\"project\" />\n              <div class=\"info\">\n                <div class=\"address\">• ${this.project.buildingComplex?.address}</div>\n                <div class=\"row\">\n                  <div class=\"label\">• 공사기간</div>\n                  <div class=\"value\">${this.project.startDate} ~ ${this.project.endDate}</div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"label\">• 현장상태</div>\n                  <div class=\"value status-value\">${PROJECT_STATE[this.project.state]}</div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"label\">• 요청상세</div>\n                  <div class=\"value bold\">???</div>\n                </div>\n                <div class=\"row\">\n                  <div class=\"label\">• 알람</div>\n                  <div class=\"value\">???</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"detail-grid\">\n              <div class=\"grid-item row\">\n                <div class=\"label\">• 공사비</div>\n                <div class=\"value\">${this.project.buildingComplex?.constructionCost?.toLocaleString() || '-'} 원</div>\n              </div>\n              <div class=\"grid-item row\">\n                <div class=\"label\">• 연면적</div>\n                <div class=\"value\">${this.project.buildingComplex?.area?.toLocaleString() || '-'} ㎡</div>\n              </div>\n              <div class=\"grid-item row\">\n                <div class=\"label\">• 용적률</div>\n                <div class=\"value\">??? %</div>\n              </div>\n              <div class=\"grid-item row\">\n                <div class=\"label\">• 투입인력</div>\n                <div class=\"value\">??? 명</div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card\">\n            <div class=\"card-title\">\n              <div>입력 대기 중</div>\n              <div class=\"triangle\"></div>\n            </div>\n            <div class=\"sub-desc\">\n              현재 입력 기한이 도래했거나, 입력이 지연되고 있는 KPI 항목입니다. 해당 항목에 대한 데이터를 입력 해 주시기 바랍니다.\n            </div>\n\n            <div class=\"list-block\">\n              <div class=\"list-title\">• 입력 대기 중 2건</div>\n              <div class=\"list-text\"># 2033312-Y5.1 : 검수자재 불합격률</div>\n              <div class=\"list-text\"># 2033312-Y5.1 : 품질시험 불합격 건수</div>\n            </div>\n            <div class=\"list-block\">\n              <div class=\"list-title\">• 입력 기한 초과 1건</div>\n              <div class=\"list-text\">\n                # 2033312-Y5.2 : 검측 불합격률 <span class=\"warn\">2025.2.12 <md-icon>report</md-icon></span>\n              </div>\n            </div>\n            <div class=\"list-block\">\n              <div class=\"list-title\">• 입력 예정 4건</div>\n              <div class=\"list-text\"># 2033320-Y4.32 : 연면적 대비 공기입력</div>\n              <div class=\"list-text\"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>\n              <div class=\"list-text\"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>\n              <div class=\"list-text\"># 2096412-Y5.31 : 현장별 일정 이탈 수준</div>\n            </div>\n            <div class=\"list-block\">\n              <div class=\"list-title\">• 입력 기한 없음 3건</div>\n              <div class=\"list-text\"># 2033320-Y4.32 : 연면적 대비 공기입력</div>\n              <div class=\"list-text\"># 2012345-Y4.32 : 책임감리원의 일정성과 수준 평가</div>\n              <div class=\"list-text\"># 2035641-Y5.22 : 설계 변경에 따른 공기 증감률</div>\n            </div>\n          </div>\n        </div>\n\n        <div right>\n          ${html`\n            <div class=\"button-line\">\n              <div class=\"ghost-btn\" @click=${() => navigate(`project-update/${this.project.id}`)}>\n                <md-icon slot=\"\">assignment</md-icon>\n                <div>프로젝트 수정</div>\n              </div>\n              <div class=\"ghost-btn\" @click=${() => navigate(`project-complete/${this.project.id}`)}>\n                <md-icon slot=\"\">assignment_turned_in</md-icon>\n                <div>프로젝트 완공 처리</div>\n              </div>\n            </div>\n          `}\n\n          <div class=\"card kpi-box\">\n            <div class=\"kpi-header\">\n              <div>\n                <div>종합 KPI</div>\n                <div class=\"triangle\"></div>\n              </div>\n              <div class=\"kpi-desc\">프로젝트의 6개 성과를 종합한 종합 KPI포인트와 각 지표별 분포</div>\n            </div>\n\n            <div class=\"kpi-summary\">\n              <div class=\"mini-boxplot\" title=\"boxplot placeholder\">\n                <div class=\"boxplot-area\">\n                  <kpi-single-boxplot-chart\n                    .data=${{\n                      min: 0,\n                      max: 100,\n                      mean: 50,\n                      median: 60,\n                      q1: 25,\n                      q3: 75,\n                      value: this.project.kpi\n                    }}\n                  ></kpi-single-boxplot-chart>\n                </div>\n\n                <div class=\"boxplot-point\">\n                  <div class=\"value\">${this.project.kpi?.toFixed(1) ?? '-'}</div>\n                  <div class=\"label\">Point</div>\n                </div>\n              </div>\n\n              <div class=\"spider-area\">\n                <kpi-radar-chart\n                  .data=${[\n                    {\n                      group: '평균',\n                      category: '생산성 성과',\n                      value: 41\n                    },\n                    {\n                      group: '평균',\n                      category: '일정 성과',\n                      value: 26\n                    },\n                    {\n                      group: '평균',\n                      category: '비용 성과',\n                      value: 30\n                    },\n                    {\n                      group: '평균',\n                      category: '품질 성과',\n                      value: 21\n                    },\n                    {\n                      group: '평균',\n                      category: '안전 성과',\n                      value: 33\n                    },\n                    {\n                      group: '평균',\n                      category: '환경 성과',\n                      value: 15\n                    }\n                  ]}\n                  .categories=${['생산성 성과', '일정 성과', '비용 성과', '품질 성과', '안전 성과', '환경 성과']}\n                  .currentGroup=${'평균'}\n                ></kpi-radar-chart>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card group-box\">\n            <div class=\"kpi-header\">\n              <div>그룹별 분포</div>\n              <div class=\"triangle\"></div>\n            </div>\n            <div class=\"desc\">\n              Boxplot(박스플롯)은 각 카테고리별로 값의 분포(최소, 1사분위, 중앙값, 3사분위, 최대, 평균, 이상치 등)를 보여줍니다.\n              박스는 중앙 50% 구간, 수염은 전체 범위, 굵은 검정색 가로선은 중앙값(메디안), 초록색 원은 평균값(Mean)을 의미합니다.\n              이 프로젝트의 값은 진한 오렌지색 원으로 별도 강조되어 표시되며, 중앙값/평균과 다를 수 있습니다.\n            </div>\n            <div class=\"group-chart\"></div>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  async pageUpdated(changes: any, lifecycle: PageLifecycle) {\n    if (this.active) {\n      await this.initProject(lifecycle.resourceId)\n    }\n  }\n\n  async initProject(projectId: string = '') {\n    const response = await client.query({\n      query: gql`\n        query Project($id: String!) {\n          project(id: $id) {\n            id\n            name\n            state\n            startDate\n            endDate\n            projectType\n            mainPhoto {\n              fullpath\n            }\n            totalProgress\n            weeklyProgress\n            kpi\n            inspPassRate\n            robotProgressRate\n            structuralSafetyRate\n            robotCount\n            buildingComplex {\n              id\n              address\n              latitude\n              longitude\n              area\n              clientCompany\n              constructionCompany\n              supervisoryCompany\n              designCompany\n              drawing {\n                id\n                name\n                fullpath\n              }\n              constructionType\n              constructionCost\n              etc\n              notice\n              householdCount\n              buildingCount\n              virtualTourLink\n              buildings {\n                id\n                name\n                floorCount\n              }\n            }\n          }\n        }\n      `,\n      variables: { id: projectId }\n    })\n\n    if (response.errors) return\n\n    this.project = response.data?.project || ({} as Project)\n  }\n}\n"]}