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

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

@@ -0,0 +1,494 @@
+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, ProjectState } from './sv-project-list';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+let SvProjectDetailPage = class SvProjectDetailPage extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.project = {};
+    }
+    get context() {
+        return {
+            title: '프로젝트 상세 정보'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        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>
+          ${this.project.state === ProjectState.ONGOING
+            ? 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>종합 KPI</div>
+              <div class="triangle"></div>
+            </div>
+            <div class="kpi-desc">
+              프로젝트의 생산성, 품질, 안전, 환경, 비용, 일정 등 6개의 성과를 종합한 종합KPI 포인트 정보와 각 지표별
+              분포차트입니다.
+            </div>
+
+            <div class="kpi-summary">
+              <div class="mini-boxplot" title="boxplot placeholder">
+                <div class="boxplot-area">boxplot area</div>
+
+                <div class="boxplot-point">
+                  <div class="value">???</div>
+                  <div class="label">Point</div>
+                </div>
+              </div>
+
+              <div class="spider-area">spider 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;
+      }
+      .kpi-header {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        color: #35618e;
+        font-weight: 700;
+        font-size: 20px;
+        letter-spacing: -0.05em;
+      }
+      .kpi-desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+      }
+      .kpi-summary {
+        display: flex;
+        align-items: center;
+        gap: 35px;
+        padding: 0 30px;
+      }
+      .mini-boxplot {
+        width: 70px;
+        height: 100%;
+        position: relative;
+      }
+      .boxplot-area {
+        width: 100%;
+        height: 190px;
+        display: flex;
+        align-items: center;
+        background: #ffffff;
+      }
+
+      .boxplot-point {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+        color: #35618e;
+      }
+      .boxplot-point .value {
+        font-size: 30px;
+        font-weight: 700;
+        color: #35618e;
+        border-radius: 6px;
+        padding: 4px 8px;
+      }
+      .boxplot-point .label {
+        font-size: 14px;
+        font-weight: 300;
+        width: auto;
+      }
+
+      /* spider chart placeholder */
+      .spider-area {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        flex: 1;
+      }
+
+      /* group distribution */
+      .group-box .desc {
+        color: #35618e;
+        font-size: 13px;
+        letter-spacing: -0.05em;
+        margin-top: 4px;
+      }
+      .group-chart {
+        height: 205px;
+        margin-top: 25px;
+      }
+    `
+];
+__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'\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      }\n      .kpi-header {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        color: #35618e;\n        font-weight: 700;\n        font-size: 20px;\n        letter-spacing: -0.05em;\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        gap: 35px;\n        padding: 0 30px;\n      }\n      .mini-boxplot {\n        width: 70px;\n        height: 100%;\n        position: relative;\n      }\n      .boxplot-area {\n        width: 100%;\n        height: 190px;\n        display: flex;\n        align-items: center;\n        background: #ffffff;\n      }\n\n      .boxplot-point {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 6px;\n        color: #35618e;\n      }\n      .boxplot-point .value {\n        font-size: 30px;\n        font-weight: 700;\n        color: #35618e;\n        border-radius: 6px;\n        padding: 4px 8px;\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        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n        flex: 1;\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  ]\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          ${this.project.state === ProjectState.ONGOING\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\n          <div class=\"card kpi-box\">\n            <div class=\"kpi-header\">\n              <div>종합 KPI</div>\n              <div class=\"triangle\"></div>\n            </div>\n            <div class=\"kpi-desc\">\n              프로젝트의 생산성, 품질, 안전, 환경, 비용, 일정 등 6개의 성과를 종합한 종합KPI 포인트 정보와 각 지표별\n              분포차트입니다.\n            </div>\n\n            <div class=\"kpi-summary\">\n              <div class=\"mini-boxplot\" title=\"boxplot placeholder\">\n                <div class=\"boxplot-area\">boxplot area</div>\n\n                <div class=\"boxplot-point\">\n                  <div class=\"value\">???</div>\n                  <div class=\"label\">Point</div>\n                </div>\n              </div>\n\n              <div class=\"spider-area\">spider chart</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"]}

package/dist-client/pages/sv-project-list.d.ts

@@ -0,0 +1,157 @@
+import '@material/web/icon/icon.js';
+import '../components/kpi-single-boxplot-chart';
+import { PageView } from '@operato/shell';
+import { Attachment } from '@things-factory/attachment-base';
+import type { FileUpload } from 'graphql-upload/GraphQLUpload.js';
+import '../components/sv-pagenation-control';
+import '@dssp/project/dist-client/pages/project/popup/popup-project-create';
+export declare enum ProjectState {
+    'ONGOING' = "10",
+    'COMPLETED' = "20"
+}
+export declare const PROJECT_STATE: {
+    "10": string;
+    "20": string;
+};
+export declare enum BuildingInspectionStatus {
+    WAIT = "WAIT",
+    OVERALL_WAIT = "OVERALL_WAIT",
+    REQUEST = "REQUEST",
+    OVERALL_REQUEST = "OVERALL_REQUEST",
+    PASS = "PASS",
+    FAIL = "FAIL"
+}
+export declare const BUILDING_INSPECTION_STATUS: {
+    WAIT: string;
+    OVERALL_WAIT: string;
+    REQUEST: string;
+    OVERALL_REQUEST: string;
+    PASS: string;
+    FAIL: string;
+};
+export declare enum ProjectType {
+    DSSP = "DSSP",
+    DCSP = "DCSP",
+    DKPI = "DKPI"
+}
+export interface Project {
+    id?: string;
+    name: string;
+    state: ProjectState;
+    startDate?: string;
+    endDate?: string;
+    mainPhoto?: Attachment;
+    mainPhotoUpload?: FileUpload;
+    totalProgress?: number;
+    weeklyProgress?: number;
+    kpi?: number;
+    inspPassRate?: number;
+    robotProgressRate?: number;
+    structuralSafetyRate?: number;
+    robotCount?: number;
+    scheduleTable?: Attachment;
+    buildingComplex: BuildingComplex;
+    projectType?: ProjectType;
+}
+export interface BuildingComplex {
+    id?: string;
+    address?: string;
+    latitude?: number;
+    longitude?: number;
+    area?: number;
+    constructionCompany?: string;
+    clientCompany?: string;
+    designCompany?: string;
+    supervisoryCompany?: string;
+    drawing?: Attachment;
+    drawingUpload?: FileUpload;
+    constructionType?: string;
+    constructionCost?: number;
+    etc?: string;
+    householdCount?: number;
+    buildingCount?: number;
+    notice?: string;
+    planXScale?: number;
+    planYScale?: number;
+    overallConstructorEmails?: string[];
+    taskConstructorEmails?: string[];
+    overallSupervisoryEmails?: string[];
+    taskSupervisoryEmails?: string[];
+    buildings?: Building[];
+}
+export interface Building {
+    id?: string;
+    name: string | undefined;
+    floorCount: number | undefined;
+    hasBasement?: boolean;
+    basementFloorCount?: number;
+    drawing?: Attachment;
+    drawingUpload?: FileUpload;
+    buildingLevels?: BuildingLevel[];
+}
+export interface BuildingLevel {
+    id?: string;
+    floor?: number;
+    floorDisplayName?: string;
+    mainDrawing?: Attachment;
+    mainDrawingImage?: string;
+    mainDrawingThumbnail?: string;
+    mainDrawingUpload?: FileUpload;
+    elevationDrawing?: Attachment;
+    elevationDrawingThumbnail?: string;
+    elevationDrawingUpload?: FileUpload;
+    rebarDistributionDrawing?: Attachment;
+    rebarDistributionDrawingThumbnail?: string;
+    rebarDistributionDrawingUpload?: FileUpload;
+    etcDrawings?: Attachment[];
+    etcDrawingsUpload?: FileUpload[];
+    building?: Building;
+    buildingInspections?: BuildingInspection[];
+}
+export interface BuildingInspection {
+    id?: string;
+    attatchments?: Attachment[];
+    status?: BuildingInspectionStatus;
+    requestDate?: Date;
+    buildingLevel?: BuildingLevel;
+    checklist?: Checklist;
+    createdAt?: Date;
+    updatedAt?: Date;
+    deletedAt?: Date;
+}
+export interface Checklist {
+    id: string;
+    name?: string;
+    documentNo?: string;
+    constructionType?: string;
+    constructionDetailType?: string;
+    location?: string;
+    constructionInspectorDate?: Date;
+    supervisorInspectorDate?: Date;
+    overallConstructorSignature?: string;
+    taskConstructorSignature?: string;
+    overallSupervisorySignature?: string;
+    taskSupervisorySignature?: string;
+    inspectionParts?: string[];
+}
+declare const SvProjectListPage_base: typeof PageView & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+export declare class SvProjectListPage extends SvProjectListPage_base {
+    static styles: import("lit").CSSResult[];
+    get context(): {
+        title: string;
+    };
+    private projectName;
+    private projectList;
+    private projectCount;
+    private currentPage;
+    private readonly pageLimit;
+    get totalPages(): number;
+    render(): import("lit-html").TemplateResult<1>;
+    pageUpdated(changes: any, lifecycle: any): Promise<void>;
+    getProjectList(): Promise<void>;
+    private _onInputChange;
+    private _onKeypress;
+    private _changePage;
+    private _openCreateProjectPopup;
+}
+export {};