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

package/dist-client/pages/building-inspection-grid/building-inspection-grid-detail.js

@@ -13,6 +13,11 @@ import { notify, openPopup } from '@operato/layout';
 import './component/notice-comment-popup';
 import './component/grid-inspection-create-popup';
 import { BUILDING_INSPECTION_STATUS_DISPLAY, BuildingInspectionStatus } from '../building-inspection/building-inspection-list';
+import '../checklist/inspection-tab-popup';
+import { verifyBiometric } from '@things-factory/auth-base/dist-client';
+import { OxPrompt } from '@operato/popup';
+import './component/plan-preview-popup';
+import './component/grid-inspection-list-layer';
 let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends ScopedElementsMixin(PageView) {
     constructor() {
         super(...arguments);
@@ -24,12 +29,14 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         };
         this.project = Object.assign({}, this.defaultProject);
         this.buildingInspections = [];
+        this.cellToInspections = {};
         this.buildingInspectionSummaryOfProject = {};
         this.buildingInspectionSummaryOfBuildingLevel = {};
         this.selectedBuilding = {};
         this.selectedLevel = {};
         this.selectedInspection = {};
         this.cell = '';
+        this.listLayer = { open: false, cell: '', items: [] };
     }
     get context() {
         return {
@@ -37,13 +44,16 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         // 그리드 가로, 세로 길이 배열 생성
         const planXScale = Array.from({ length: ((_b = (_a = this.project) === null || _a === void 0 ? void 0 : _a.buildingComplex) === null || _b === void 0 ? void 0 : _b.planXScale) || 0 }, (_, i) => i);
         const planYScale = Array.from({ length: ((_d = (_c = this.project) === null || _c === void 0 ? void 0 : _c.buildingComplex) === null || _d === void 0 ? void 0 : _d.planYScale) || 0 }, (_, i) => i);
         return html `
       <div header>
-        <h2>${this.project.name} ${(_e = this.selectedBuilding) === null || _e === void 0 ? void 0 : _e.name} ${(_f = this.selectedLevel) === null || _f === void 0 ? void 0 : _f.floor}층</h2>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.project.name} ${(_e = this.selectedBuilding) === null || _e === void 0 ? void 0 : _e.name} ${(_f = this.selectedLevel) === null || _f === void 0 ? void 0 : _f.floorDisplayName}층
+        </h2>
         <div button-container>
           <md-elevated-button href=${`project-update/${this.project.id}`}>
             <md-icon slot="icon">assignment</md-icon>프로젝트 정보 수정
@@ -51,6 +61,9 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
           <md-elevated-button href=${`project-plan-management/${this.project.id}`}>
             <md-icon slot="icon">description</md-icon>도면 관리
           </md-elevated-button>
+          <md-elevated-button @click=${this._openPlanPreviewPopup}>
+            <md-icon slot="icon">folder_eye</md-icon>추가 도면 보기
+          </md-elevated-button>
         </div>
       </div>
 
@@ -79,22 +92,22 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             </div>
 
             <div state>
-              <span
-                ><md-icon request slot="icon">frame_inspect</md-icon> 검측대기
-                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.WAIT.toLowerCase()]}</span></span
-              >
-              <span
-                ><md-icon request slot="icon">exclamation</md-icon> 검측요청
-                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.REQUEST.toLowerCase()]}</span></span
-              >
-              <span
-                ><md-icon pass slot="icon">check</md-icon> 합격
-                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.PASS.toLowerCase()]}</span></span
-              >
-              <span
-                ><md-icon fail slot="icon">close</md-icon> 불합격
-                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.FAIL.toLowerCase()]}</span></span
-              >
+              <span>
+                <md-icon request slot="icon">frame_inspect</md-icon> 검측대기
+                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.WAIT.toLowerCase()]}</span>
+              </span>
+              <span>
+                <md-icon request slot="icon">exclamation</md-icon> 검측요청
+                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.REQUEST.toLowerCase()]}</span>
+              </span>
+              <span>
+                <md-icon pass slot="icon">check</md-icon> 합격
+                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.PASS.toLowerCase()]}</span>
+              </span>
+              <span>
+                <md-icon fail slot="icon">close</md-icon> 불합격
+                <span bold>${this.buildingInspectionSummaryOfProject[BuildingInspectionStatus.FAIL.toLowerCase()]}</span>
+              </span>
             </div>
           </div>
 
@@ -104,20 +117,30 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             <div grid>
               ${planXScale.map(v => html ` <div row=${v}>
                     ${planYScale.map(vv => {
-            const buildingInspection = this.buildingInspections.find(i => i.cellX === v && i.cellY === vv);
-            const status = (buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.status) || '';
-            return html `<div
-                        column=${vv}
-                        cell=${`${v},${vv}`}
-                        buildingInspectionId=${buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.id}
-                        status=${status}
-                        @click=${this._onClickGrid}
-                      >
-                        ${this._getIconHtmlByStatus(status)}
+            const cellKey = `${v},${vv}`;
+            const inspections = this.cellToInspections[cellKey] || [];
+            const count = inspections.length;
+            let countClass = '';
+            if (count > 0) {
+                const allPass = inspections.every(i => i.status === BuildingInspectionStatus.PASS);
+                const anyFail = inspections.some(i => i.status === BuildingInspectionStatus.FAIL);
+                countClass = allPass ? 'green' : anyFail ? 'red' : 'black';
+            }
+            return html `<div column=${vv} cell=${cellKey} @click=${this._onClickGrid}>
+                        ${count > 0 ? html `<span class="cell-count ${countClass}">${count}</span>` : ''}
                       </div>`;
         })}
                   </div>`)}
             </div>
+            ${this.listLayer.open
+            ? html `<grid-inspection-list-layer
+                  .items=${this.listLayer.items}
+                  .anchorEl=${this._getCellElement(this.listLayer.cell)}
+                  .containerEl=${this.drawingContainer}
+                  @select=${this._onSelectListItem}
+                  @close=${this._closeListLayer}
+                ></grid-inspection-list-layer>`
+            : ''}
           </div>
         </div>
 
@@ -125,20 +148,20 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
           <div top bold>
             <div>신규 등록 현황</div>
             <div content>
-              <span
-                ><md-icon request slot="icon">frame_inspect</md-icon>
+              <span>
+                <md-icon request slot="icon">frame_inspect</md-icon>
                 ${this.buildingInspectionSummaryOfBuildingLevel[BuildingInspectionStatus.WAIT.toLowerCase()]}
               </span>
-              <span
-                ><md-icon request slot="icon">exclamation</md-icon>
+              <span>
+                <md-icon request slot="icon">exclamation</md-icon>
                 ${this.buildingInspectionSummaryOfBuildingLevel[BuildingInspectionStatus.REQUEST.toLowerCase()]}
               </span>
-              <span
-                ><md-icon pass slot="icon">check</md-icon>
+              <span>
+                <md-icon pass slot="icon">check</md-icon>
                 ${this.buildingInspectionSummaryOfBuildingLevel[BuildingInspectionStatus.PASS.toLowerCase()]}
               </span>
-              <span
-                ><md-icon fail slot="icon">close</md-icon>
+              <span>
+                <md-icon fail slot="icon">close</md-icon>
                 ${this.buildingInspectionSummaryOfBuildingLevel[BuildingInspectionStatus.FAIL.toLowerCase()]}
               </span>
             </div>
@@ -146,33 +169,86 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
 
           <div bottom>
             <div name bold>층별 공지사항</div>
-            <md-elevated-button @click=${e => this._onClicPopupNotice()}
-              >공지사항 확인하기(${((_o = this.selectedLevel) === null || _o === void 0 ? void 0 : _o.noticeCount) || 0})</md-elevated-button
-            >
+            <md-elevated-button @click=${e => this._onClicPopupNotice()}>
+              공지사항 확인하기(${((_o = this.selectedLevel) === null || _o === void 0 ? void 0 : _o.noticeCount) || 0})
+            </md-elevated-button>
 
             <div name bold>시공검측 세부사항</div>
             ${html `
               <div view>
+                <div status>
+                  ${this._getIconHtmlByStatus(this.selectedInspection.status)}
+                  <span bold> ${BUILDING_INSPECTION_STATUS_DISPLAY[this.selectedInspection.status]}</span>
+                </div>
+
+                <div>
+                  <div date>공종 : ${((_q = (_p = this.selectedInspection) === null || _p === void 0 ? void 0 : _p.checklist) === null || _q === void 0 ? void 0 : _q.constructionType) || ''}</div>
+                </div>
+
+                <hr />
+
+                <div>
+                  <div date>세부 공종 : ${((_s = (_r = this.selectedInspection) === null || _r === void 0 ? void 0 : _r.checklist) === null || _s === void 0 ? void 0 : _s.constructionDetailType) || ''}</div>
+                </div>
+
+                <hr />
+
                 <div>
-                  <div status>
-                    ${this._getIconHtmlByStatus(this.selectedInspection.status)}
-                    <span bold> ${BUILDING_INSPECTION_STATUS_DISPLAY[this.selectedInspection.status]}</span>
-                  </div>
                   <div date>검측일 : ${this.selectedInspection.requestDate}</div>
                 </div>
+
                 <hr />
-                <!-- <div desc>${this.selectedInspection.detail} <img /></div> 
-                    <hr />-->
+
                 <div manager>
-                  담당자 : ${(_q = (_p = this.selectedInspection) === null || _p === void 0 ? void 0 : _p.manager) === null || _q === void 0 ? void 0 : _q.name} <br />
-                  ${(_s = (_r = this.selectedInspection) === null || _r === void 0 ? void 0 : _r.manager) === null || _s === void 0 ? void 0 : _s.phone}
+                  담당자 : ${(_u = (_t = this.selectedInspection) === null || _t === void 0 ? void 0 : _t.manager) === null || _u === void 0 ? void 0 : _u.name} <br />
+                  ${(_w = (_v = this.selectedInspection) === null || _v === void 0 ? void 0 : _v.manager) === null || _w === void 0 ? void 0 : _w.phone}
                 </div>
+
                 <hr />
+
+                ${this.selectedInspection.memo
+            ? html `
+                      <div>
+                        <div date>메모 : ${this.selectedInspection.memo}</div>
+                      </div>
+                      <hr />
+                    `
+            : html ``}
+                ${((_x = this.selectedInspection.attachments) === null || _x === void 0 ? void 0 : _x.length) > 0
+            ? html `
+                      <div class="attachment-info">
+                        <span class="attachment-count">첨부파일: ${this.selectedInspection.attachments.length}개</span>
+                        <md-elevated-button @click=${() => this._onClickUpdateInspection(1)}>
+                          <md-icon slot="icon">attach_file</md-icon>첨부파일 보기
+                        </md-elevated-button>
+                      </div>
+                      <hr />
+                    `
+            : html ``}
               </div>
 
-              <input type="checkbox" name="apply-to-all" checked />
+              <!-- 전층 동일 적용 버튼 -->
+              ${this.selectedInspection.status
+            ? html `<md-filled-button apply-to-all @click=${() => this._onClickApplyToAll()}>전층 동일 적용</md-filled-button>`
+            : html ``}
 
-              <md-outlined-button @click=${() => this._onClickCreateInspection()}>검측 정보 등록 </md-outlined-button>
+              <!-- 검측 정보 등록, 수정 버튼 -->
+              ${!this.cell
+            ? html ``
+            : !this.selectedInspection.status
+                ? html `<md-outlined-button @click=${() => this._onClickCreateInspection()}>검측 정보 등록 </md-outlined-button>`
+                : this.selectedInspection.status == BuildingInspectionStatus.PASS
+                    ? html `<md-filled-button @click=${() => this._onClickUpdateInspection()}>검측 정보 보기 </md-filled-button> `
+                    : html `
+                        <md-filled-button update @click=${() => this._onClickUpdateInspection()}>
+                          검측 정보 수정
+                        </md-filled-button>
+                        ${this.selectedInspection.status == BuildingInspectionStatus.WAIT
+                        ? html `<md-filled-button delete @click=${() => this._onClickDeleteInspection()}>
+                              삭제
+                            </md-filled-button>`
+                        : html ``}
+                      `}
             `}
           </div>
         </div>
@@ -199,10 +275,16 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
           project(id: $id) {
             id
             name
+            projectType
             buildingComplex {
               id
               planXScale
               planYScale
+              overallConstructorEmails
+              taskConstructorEmails
+              overallSupervisoryEmails
+              taskSupervisoryEmails
+
               buildings {
                 id
                 name
@@ -231,6 +313,10 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
               cellY
               status
               requestDate
+              checklist {
+                constructionType
+                constructionDetailType
+              }
               creator {
                 id
                 name
@@ -250,6 +336,7 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             return;
         this.project = (_a = response.data) === null || _a === void 0 ? void 0 : _a.project;
         this.buildingInspections = (_c = (_b = response.data) === null || _b === void 0 ? void 0 : _b.buildingInspectionsOfBuildingLevel) === null || _c === void 0 ? void 0 : _c.items;
+        this._groupInspectionsByCell();
         this.buildingInspectionSummaryOfProject = (_d = response.data) === null || _d === void 0 ? void 0 : _d.buildingInspectionSummaryOfProject;
         this.buildingInspectionSummaryOfBuildingLevel = (_e = response.data) === null || _e === void 0 ? void 0 : _e.buildingInspectionSummaryOfBuildingLevel;
         // buildingId 파라미터가 있으면 선택된 빌딩, 없으면 첫번째 빌딩 선택
@@ -279,6 +366,7 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             buildingLevels {
               id
               floor
+              floorDisplayName
               noticeCount
               mainDrawing {
                 id
@@ -309,10 +397,38 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
             cellY
             status
             requestDate
+            memo
+            attachments {
+              id
+            }
 
             checklist {
               id
               name
+              constructionType
+              constructionDetailType
+              location
+              inspectionParts
+              documentNo
+              constructionInspectionDate
+              supervisorInspectionDate
+              overallConstructorSignature
+              taskConstructorSignature
+              overallSupervisorySignature
+              taskSupervisorySignature
+
+              checklistItems {
+                id
+                name
+                sequence
+                mainType
+                detailType
+                inspctionCriteria
+                constructionConfirmStatus
+                supervisoryConfirmStatus
+                checklistItemCommentCount
+                checklistItemAttachmentCount
+              }
             }
 
             manager {
@@ -335,6 +451,7 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         const buildingId = e.target.value;
         this.selectedBuilding = await this._getBuilding(buildingId);
         this.selectedLevel = Object.assign({}, (_b = (_a = this.selectedBuilding) === null || _a === void 0 ? void 0 : _a.buildingLevels) === null || _b === void 0 ? void 0 : _b[0]);
+        this.refresh();
     }
     _onSelectBuildingLevel(e) {
         var _a, _b, _c;
@@ -346,14 +463,22 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
     async _onClickGrid(e) {
         var _a;
         const target = e.currentTarget;
-        const buildingInspectionId = target.getAttribute('buildingInspectionId');
         const cell = target.getAttribute('cell');
         // active 속성 모두 제거후 클릭한 셀만 active로 변경
-        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div[cell][active]').forEach(e => e.removeAttribute('active'));
-        target.setAttribute('active', true);
-        const [cellX, cellY] = cell.split(',');
-        this.selectedInspection = buildingInspectionId ? await this._getBuildingInspection(buildingInspectionId) : { cellX, cellY };
-        this.cell = cell;
+        (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('div[cell][active]').forEach(el => el.removeAttribute('active'));
+        target.setAttribute('active', 'true');
+        const [cellX, cellY] = (cell || '').split(',');
+        const items = this.cellToInspections[cell || ''] || [];
+        // 검측이 없으면 기존처럼 등록 가능하도록 선택만 처리
+        if (items.length === 0) {
+            this._closeListLayer();
+            this.selectedInspection = { cellX, cellY };
+            this.cell = cell || '';
+            return;
+        }
+        // 검측이 있으면 레이어 오픈
+        this.cell = cell || '';
+        this._openListLayer(target, items, this.cell);
     }
     _onClicPopupNotice() {
         var _a, _b;
@@ -388,6 +513,19 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         ></grid-inspection-create-popup>
       `, { backdrop: true, size: 'large', title: '검측 요청서 등록' });
     }
+    _onClickUpdateInspection(initialTab = 0) {
+        openPopup(html `
+        <inspection-tab-popup
+          .selectedInspection=${this.selectedInspection}
+          .project=${this.project}
+          .initialTab=${initialTab}
+          @modify-checklist=${(e) => this.validateChecklist(e.detail.checklist)}
+          @requestRefresh=${async (e) => {
+            await this.refresh(e.detail.buildingInspectionId);
+        }}
+        ></inspection-tab-popup>
+      `, { backdrop: true, size: 'large', title: '검측 요청서 수정' });
+    }
     async refresh(buildingInspectionId = '') {
         // 그리드, 서머리 정보 갱신
         await this.initProject(this.project.id, this.selectedBuilding.id, this.selectedLevel.id);
@@ -397,10 +535,10 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
     _getIconHtmlByStatus(status) {
         if (!status)
             return '';
-        if (status == BuildingInspectionStatus.WAIT || status == BuildingInspectionStatus.REQUEST) {
+        if (status == BuildingInspectionStatus.WAIT || status == BuildingInspectionStatus.OVERALL_WAIT) {
             return html `<md-icon request slot="icon">frame_inspect</md-icon>`;
         }
-        if (status == BuildingInspectionStatus.OVERALL_WAIT || status == BuildingInspectionStatus.OVERALL_REQUEST) {
+        if (status == BuildingInspectionStatus.REQUEST || status == BuildingInspectionStatus.OVERALL_REQUEST) {
             return html `<md-icon request slot="icon">exclamation</md-icon>`;
         }
         if (status == BuildingInspectionStatus.PASS) {
@@ -408,6 +546,156 @@ let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends Sc
         }
         return html `<md-icon fail slot="icon">close</md-icon>`;
     }
+    _groupInspectionsByCell() {
+        const map = {};
+        for (const item of this.buildingInspections || []) {
+            const key = `${item.cellX},${item.cellY}`;
+            if (!map[key])
+                map[key] = [];
+            map[key].push(item);
+        }
+        this.cellToInspections = map;
+    }
+    _openListLayer(anchorEl, items, cell) {
+        this.listLayer = { open: true, cell, items };
+    }
+    _closeListLayer() {
+        if (!this.listLayer.open)
+            return;
+        this.listLayer = { open: false, cell: '', items: [] };
+    }
+    async _onSelectListItem(e) {
+        var _a;
+        const id = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.id;
+        if (!id)
+            return;
+        const inspection = await this._getBuildingInspection(id);
+        this.selectedInspection = inspection;
+        this._closeListLayer();
+    }
+    _getCellElement(cell) {
+        var _a;
+        if (!cell)
+            return null;
+        return (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`div[cell='${cell}']`);
+    }
+    async validateChecklist(checklist) {
+        var _a, _b;
+        try {
+            const result = await verifyBiometric();
+            if (result.verified) {
+                console.log('Verification successful. Proceeding with sensitive action.');
+            }
+            else {
+                notify({ message: 'Verification failed:' + result.message });
+                return;
+            }
+        }
+        catch (error) {
+            notify({ message: 'Error during biometric verification:' + error });
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation UpdateBuildingInspectionChecklist($buildingInspection: UpdateBuildingInspectionSubmitType!) {
+          updateBuildingInspectionChecklist(buildingInspection: $buildingInspection)
+        }
+      `,
+            variables: {
+                buildingInspection: {
+                    id: this.selectedInspection.id,
+                    checklist: {
+                        id: checklist.id,
+                        overallConstructorSignature: checklist.overallConstructorSignature,
+                        taskConstructorSignature: checklist.taskConstructorSignature,
+                        overallSupervisorySignature: checklist.overallSupervisorySignature,
+                        taskSupervisorySignature: checklist.taskSupervisorySignature
+                    },
+                    checklistItem: checklist.checklistItems.map(item => ({
+                        id: item.id,
+                        constructionConfirmStatus: item.constructionConfirmStatus,
+                        supervisoryConfirmStatus: item.supervisoryConfirmStatus
+                    }))
+                }
+            }
+        });
+        if (!response.errors) {
+            notify({ message: '검측 요청서를 등록하였습니다.' });
+            this.refresh(this.selectedInspection.id);
+            history.back();
+        }
+        else {
+            notify({ message: ((_b = (_a = response.errors) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '검측 요청서 등록에 실패하였습니다.', level: 'error' });
+        }
+    }
+    async _onClickApplyToAll() {
+        var _a, _b;
+        if ((await OxPrompt.open({
+            title: '전층 동일 적용',
+            text: '해당 검측을 전층에 동일하게 적용 하시겠습니까?',
+            confirmButton: { text: '확인' },
+            cancelButton: { text: '취소' }
+        })) === false) {
+            return;
+        }
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ApplyToAllBuildingInspection($buildingInspectionId: String!) {
+          applyToAllBuildingInspection(buildingInspectionId: $buildingInspectionId)
+        }
+      `,
+            variables: {
+                buildingInspectionId: this.selectedInspection.id
+            }
+        });
+        if (!response.errors) {
+            notify({ message: '전층 동일 적용 완료' });
+            this.refresh(this.selectedInspection.id);
+        }
+        else {
+            notify({ message: ((_b = (_a = response.errors) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) || '전층 동일 적용에 실패하였습니다.', level: 'error' });
+        }
+    }
+    _openPlanPreviewPopup() {
+        openPopup(html `<plan-preview-popup .buildingLevelId=${this.selectedLevel.id}></plan-preview-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: '추가 도면 보기'
+        });
+    }
+    async _onClickDeleteInspection() {
+        var _a, _b, _c;
+        if (!((_a = this.selectedInspection) === null || _a === void 0 ? void 0 : _a.id)) {
+            notify({ message: '삭제할 검측을 선택해주세요.', level: 'info' });
+            return;
+        }
+        const confirmed = await OxPrompt.open({
+            title: '검측 삭제',
+            text: '해당 검측을 삭제하시겠습니까? 삭제 후 되돌릴 수 없습니다.',
+            confirmButton: { text: '삭제' },
+            cancelButton: { text: '취소' }
+        });
+        if (confirmed === false)
+            return;
+        const response = await client.mutate({
+            mutation: gql `
+        mutation ($ids: [String!]!) {
+          deleteBuildingInspections(ids: $ids)
+        }
+      `,
+            variables: {
+                ids: [this.selectedInspection.id]
+            }
+        });
+        if (!response.errors) {
+            notify({ message: '삭제되었습니다.' });
+            this.selectedInspection = {};
+            await this.refresh();
+        }
+        else {
+            notify({ message: ((_c = (_b = response.errors) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.message) || '삭제에 실패하였습니다.', level: 'error' });
+        }
+    }
 };
 BuildingInspectionGridDetail.styles = [
     css `
@@ -430,6 +718,15 @@ BuildingInspectionGridDetail.styles = [
         --md-filled-button-trailing-space: 15px;
         --md-filled-button-leading-space: 15px;
       }
+      md-filled-button[update] {
+        --md-filled-button-container-color: #42b382;
+      }
+      md-filled-button[apply-to-all] {
+        --md-filled-button-container-color: #aaa;
+      }
+      md-filled-button[delete] {
+        --md-filled-button-container-color: #ff4444;
+      }
       md-outlined-button {
         color: #586878;
         font-weight: bold;
@@ -482,8 +779,28 @@ BuildingInspectionGridDetail.styles = [
         margin: 0px 20px;
 
         h2 {
+          display: flex;
+          gap: 7px;
           flex: 0.5;
           color: #3f71a0;
+          font-size: 18px;
+
+          md-icon[back] {
+            background: linear-gradient(135deg, #3f71a0 0%, #5a8cc7 100%);
+            color: white;
+            padding: 8px;
+            border-radius: 50%;
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(63, 113, 160, 0.3);
+            width: 14px;
+            height: 14px;
+            --md-icon-size: 20px;
+          }
+
+          md-icon[back]:hover {
+            background: linear-gradient(135deg, #2e5c89 0%, #4a7bb0 100%);
+            box-shadow: 0 4px 12px rgba(63, 113, 160, 0.4);
+          }
         }
 
         div[button-container] {
@@ -594,6 +911,7 @@ BuildingInspectionGridDetail.styles = [
                 display: flex;
                 justify-content: center;
                 align-items: center;
+                position: relative;
               }
             }
 
@@ -707,6 +1025,52 @@ BuildingInspectionGridDetail.styles = [
           }
         }
       }
+
+      .attachment-info {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 8px;
+        gap: 5px;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .attachment-count {
+        font-size: 14px;
+        color: #586878;
+      }
+      .cell-count {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        justify-self: anchor-center;
+        align-self: anchor-center;
+        width: 22px;
+        height: 22px;
+        background: #ffffff;
+        border: 2px solid #cccccc;
+        border-radius: 50%;
+        font-weight: 700;
+        font-size: 13px;
+        line-height: 1;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+      }
+      .cell-count.green {
+        color: #2e7d32;
+        border-color: #4bbb4a;
+      }
+      .cell-count.red {
+        color: #b71c1c;
+        border-color: #ff4444;
+      }
+      .cell-count.black {
+        color: #333333;
+        border-color: #4e5055;
+      }
     `
 ];
 __decorate([
@@ -717,6 +1081,10 @@ __decorate([
     state(),
     __metadata("design:type", Object)
 ], BuildingInspectionGridDetail.prototype, "buildingInspections", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "cellToInspections", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
@@ -741,6 +1109,10 @@ __decorate([
     state(),
     __metadata("design:type", String)
 ], BuildingInspectionGridDetail.prototype, "cell", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "listLayer", void 0);
 __decorate([
     query('md-filled-select[building]'),
     __metadata("design:type", Object)
@@ -749,6 +1121,10 @@ __decorate([
     query('md-filled-select[level]'),
     __metadata("design:type", Object)
 ], BuildingInspectionGridDetail.prototype, "htmlSelectLevel", void 0);
+__decorate([
+    query('div[drawing]'),
+    __metadata("design:type", HTMLDivElement)
+], BuildingInspectionGridDetail.prototype, "drawingContainer", void 0);
 BuildingInspectionGridDetail = __decorate([
     customElement('building-inspection-grid-detail')
 ], BuildingInspectionGridDetail);