@dssp/supervision 1.0.0-alpha.2 → 1.0.0-alpha.21

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

@@ -0,0 +1,953 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/textfield/outlined-text-field.js';
+import '@material/web/button/outlined-button.js';
+import { PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { client } from '@operato/graphql';
+import gql from 'graphql-tag';
+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 { verifyBiometric } from '@things-factory/auth-base/dist-client';
+import { OxPrompt } from '@operato/popup';
+import './component/plan-preview-popup';
+let BuildingInspectionGridDetail = class BuildingInspectionGridDetail extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.defaultProject = {
+            name: '',
+            buildingComplex: {
+                buildings: []
+            }
+        };
+        this.project = Object.assign({}, this.defaultProject);
+        this.buildingInspections = [];
+        this.buildingInspectionSummaryOfProject = {};
+        this.buildingInspectionSummaryOfBuildingLevel = {};
+        this.selectedBuilding = {};
+        this.selectedLevel = {};
+        this.selectedInspection = {};
+        this.cell = '';
+    }
+    get context() {
+        return {
+            title: '층별 시공검측 상세 정보'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+        // 그리드 가로, 세로 길이 배열 생성
+        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>
+          <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>프로젝트 정보 수정
+          </md-elevated-button>
+          <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>
+
+      <div body>
+        <div left>
+          <div select>
+            <div>
+              <md-filled-select building @change=${this._onSelectBuilding}>
+                ${(_j = (_h = (_g = this.project) === null || _g === void 0 ? void 0 : _g.buildingComplex) === null || _h === void 0 ? void 0 : _h.buildings) === null || _j === void 0 ? void 0 : _j.map(building => {
+            var _a;
+            const selected = building.id === ((_a = this.selectedBuilding) === null || _a === void 0 ? void 0 : _a.id);
+            return html ` <md-select-option ?selected=${selected} .value=${building.id}>
+                    <div slot="headline">${building.name}</div>
+                  </md-select-option>`;
+        })}
+              </md-filled-select>
+
+              <md-filled-select level @change=${this._onSelectBuildingLevel}>
+                ${(_l = (_k = this.selectedBuilding) === null || _k === void 0 ? void 0 : _k.buildingLevels) === null || _l === void 0 ? void 0 : _l.map(level => {
+            const selected = level.id === this.selectedLevel.id;
+            return html `<md-select-option ?selected=${selected} .value=${level.id}>
+                    <div slot="headline">${level.floor}</div>
+                  </md-select-option>`;
+        })}
+              </md-filled-select>
+            </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>
+            </div>
+          </div>
+
+          <div drawing>
+            <img src=${((_m = this.selectedLevel) === null || _m === void 0 ? void 0 : _m.mainDrawingImage) || '/assets/images/img-drawing-default.png'} />
+
+            <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)}
+                      </div>`;
+        })}
+                  </div>`)}
+            </div>
+          </div>
+        </div>
+
+        <div right>
+          <div top bold>
+            <div>신규 등록 현황</div>
+            <div content>
+              <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>
+                ${this.buildingInspectionSummaryOfBuildingLevel[BuildingInspectionStatus.REQUEST.toLowerCase()]}
+              </span>
+              <span>
+                <md-icon pass slot="icon">check</md-icon>
+                ${this.buildingInspectionSummaryOfBuildingLevel[BuildingInspectionStatus.PASS.toLowerCase()]}
+              </span>
+              <span>
+                <md-icon fail slot="icon">close</md-icon>
+                ${this.buildingInspectionSummaryOfBuildingLevel[BuildingInspectionStatus.FAIL.toLowerCase()]}
+              </span>
+            </div>
+          </div>
+
+          <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>
+
+            <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 date>검측일 : ${this.selectedInspection.requestDate}</div>
+                </div>
+
+                <hr />
+
+                <div manager>
+                  담당자 : ${(_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 />
+              </div>
+
+              <!-- 전층 동일 적용 버튼 -->
+              ${this.selectedInspection.status
+            ? html `<md-filled-button apply-to-all @click=${() => this._onClickApplyToAll()}>전층 동일 적용</md-filled-button>`
+            : html ``}
+
+              <!-- 검측 정보 등록, 수정 버튼 -->
+              ${!this.cell || this.selectedInspection.status == BuildingInspectionStatus.PASS
+            ? html ``
+            : !this.selectedInspection.status
+                ? html `<md-outlined-button @click=${() => this._onClickCreateInspection()}>검측 정보 등록 </md-outlined-button>`
+                : html `<md-filled-button update @click=${() => this._onClickUpdateInspection()}
+                      >검측 정보 수정
+                    </md-filled-button> `}
+            `}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async pageInitialized(lifecycle) { }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            const params = lifecycle.params;
+            await this.initProject(lifecycle.resourceId, params.buildingId, params.levelId);
+        }
+    }
+    async initProject(projectId = '', buildingId = '', levelId = '') {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        const response = await client.query({
+            query: gql `
+        query Project(
+          $id: String!
+          $projectId: String!
+          $buildingLevelId: String!
+          $params: BuildingInspectionsOfBuildingLevel!
+        ) {
+          project(id: $id) {
+            id
+            name
+            buildingComplex {
+              id
+              planXScale
+              planYScale
+              overallConstructorEmails
+              taskConstructorEmails
+              overallSupervisoryEmails
+              taskSupervisoryEmails
+
+              buildings {
+                id
+                name
+              }
+            }
+          }
+
+          buildingInspectionSummaryOfProject(projectId: $projectId) {
+            wait
+            request
+            pass
+            fail
+          }
+
+          buildingInspectionSummaryOfBuildingLevel(buildingLevelId: $buildingLevelId) {
+            wait
+            request
+            pass
+            fail
+          }
+
+          buildingInspectionsOfBuildingLevel(params: $params) {
+            items {
+              id
+              cellX
+              cellY
+              status
+              requestDate
+              creator {
+                id
+                name
+              }
+            }
+          }
+        }
+      `,
+            variables: {
+                id: projectId,
+                projectId: projectId,
+                buildingLevelId: levelId,
+                params: { buildingLevelId: levelId }
+            }
+        });
+        if (response.errors)
+            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.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 파라미터가 있으면 선택된 빌딩, 없으면 첫번째 빌딩 선택
+        this.selectedBuilding = buildingId
+            ? (_h = (_g = (_f = this.project) === null || _f === void 0 ? void 0 : _f.buildingComplex) === null || _g === void 0 ? void 0 : _g.buildings) === null || _h === void 0 ? void 0 : _h.filter(v => v.id === buildingId)[0]
+            : (_l = (_k = (_j = this.project) === null || _j === void 0 ? void 0 : _j.buildingComplex) === null || _k === void 0 ? void 0 : _k.buildings) === null || _l === void 0 ? void 0 : _l[0];
+        // 선택된 동의 층 리스트 가져오기
+        this.selectedBuilding = await this._getBuilding(this.selectedBuilding.id);
+        // levelId 파라미터가 있으면 선택된 층, 없으면 첫번째 층 선택
+        this.selectedLevel = levelId
+            ? (_o = (_m = this.selectedBuilding) === null || _m === void 0 ? void 0 : _m.buildingLevels) === null || _o === void 0 ? void 0 : _o.filter(v => v.id === levelId)[0]
+            : (_q = (_p = this.selectedBuilding) === null || _p === void 0 ? void 0 : _p.buildingLevels) === null || _q === void 0 ? void 0 : _q[0];
+        // 동, 층이 랜더링 된 후에 select를 위해 이 시점에서 랜더링
+        this.selectedBuilding = await Object.assign({}, this.selectedBuilding);
+        // 기본 값 셋팅 select
+        await this.htmlSelectBuilding.select(this.selectedBuilding.id);
+        await this.htmlSelectLevel.select(this.selectedLevel.id);
+    }
+    async _getBuilding(buildingId = '') {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query Building($id: String!) {
+          building(id: $id) {
+            id
+            name
+            buildingLevels {
+              id
+              floor
+              floorDisplayName
+              noticeCount
+              mainDrawing {
+                id
+                name
+                fullpath
+              }
+              mainDrawingImage
+            }
+          }
+        }
+      `,
+            variables: {
+                id: buildingId
+            }
+        });
+        if (response.errors)
+            return;
+        return ((_a = response.data) === null || _a === void 0 ? void 0 : _a.building) || {};
+    }
+    async _getBuildingInspection(buildingInspectionId = '') {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query BuildingInspection($id: String!) {
+          buildingInspection(id: $id) {
+            id
+            cellX
+            cellY
+            status
+            requestDate
+
+            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 {
+              userId
+              name
+            }
+          }
+        }
+      `,
+            variables: {
+                id: buildingInspectionId
+            }
+        });
+        if (response.errors)
+            return;
+        return ((_a = response.data) === null || _a === void 0 ? void 0 : _a.buildingInspection) || {};
+    }
+    async _onSelectBuilding(e) {
+        var _a, _b;
+        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;
+        // SELECT event는 target, 팝업 Close는 detail
+        const buildingLevelId = ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value) || e.detail.buildingLevelId;
+        this.selectedLevel = Object.assign({}, (((_c = (_b = this.selectedBuilding) === null || _b === void 0 ? void 0 : _b.buildingLevels) === null || _c === void 0 ? void 0 : _c.find(v => v.id == buildingLevelId)) || {}));
+        this.refresh();
+    }
+    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;
+    }
+    _onClicPopupNotice() {
+        var _a, _b;
+        openPopup(html `<notice-comment-popup
+        .buildingLevelId=${this.selectedLevel.id}
+        .title=${`${(_a = this.selectedBuilding) === null || _a === void 0 ? void 0 : _a.name} ${(_b = this.selectedLevel) === null || _b === void 0 ? void 0 : _b.floor}층 공지사항`}
+        @change-comment=${(e) => {
+            if (e.detail.type === 'create') {
+                this.selectedLevel.noticeCount++; // 코멘트 카운트 + 1
+            }
+            else if (e.detail.type === 'delete') {
+                this.selectedLevel.noticeCount--; // 코멘트 카운트 - 1
+            }
+            this.requestUpdate();
+        }}
+      ></notice-comment-popup>`, { backdrop: true, size: 'medium', title: '층별 공지사항' });
+    }
+    _onClickCreateInspection() {
+        if (!this.cell) {
+            notify({ message: '셀을 선택해주세요.' });
+            return;
+        }
+        openPopup(html `
+        <grid-inspection-create-popup
+          .projectId=${this.project.id}
+          .selectedBuildingId=${this.selectedBuilding.id}
+          .selectedBuildingLevelId=${this.selectedLevel.id}
+          .cell=${this.cell}
+          @requestRefresh=${async (e) => {
+            await this.refresh(e.detail.buildingInspectionId);
+        }}
+        ></grid-inspection-create-popup>
+      `, { backdrop: true, size: 'large', title: '검측 요청서 등록' });
+    }
+    _onClickUpdateInspection() {
+        var _a;
+        openPopup(html `
+        <div style="overflow-y: auto; height: 100%;">
+          <checklist-view
+            .mode=${"EDITOR" /* ChecklistMode.EDITOR */}
+            .status=${this.selectedInspection.status}
+            .checklist=${this.selectedInspection.checklist || {}}
+            .buildingComplex=${((_a = this.project) === null || _a === void 0 ? void 0 : _a.buildingComplex) || {}}
+          ></checklist-view>
+
+          <div style="text-align: right; margin-right: 20px; margin-bottom: 15px">
+            <md-elevated-button
+              ?disabled=${this.selectedInspection.status == BuildingInspectionStatus.PASS}
+              @click=${this._onClickModifyChecklist.bind(this)}
+            >
+              <md-icon slot="icon">assignment</md-icon>등록
+            </md-elevated-button>
+          </div>
+        </div>
+      `, { backdrop: true, size: 'large', title: '검측 요청서 수정' });
+    }
+    async refresh(buildingInspectionId = '') {
+        // 그리드, 서머리 정보 갱신
+        await this.initProject(this.project.id, this.selectedBuilding.id, this.selectedLevel.id);
+        // 선택된 검측 정보 갱신
+        this.selectedInspection = buildingInspectionId ? await this._getBuildingInspection(buildingInspectionId) : {};
+    }
+    _getIconHtmlByStatus(status) {
+        if (!status)
+            return '';
+        if (status == BuildingInspectionStatus.WAIT || status == BuildingInspectionStatus.OVERALL_WAIT) {
+            return html `<md-icon request slot="icon">frame_inspect</md-icon>`;
+        }
+        if (status == BuildingInspectionStatus.REQUEST || status == BuildingInspectionStatus.OVERALL_REQUEST) {
+            return html `<md-icon request slot="icon">exclamation</md-icon>`;
+        }
+        if (status == BuildingInspectionStatus.PASS) {
+            return html `<md-icon pass slot="icon">check</md-icon>`;
+        }
+        return html `<md-icon fail slot="icon">close</md-icon>`;
+    }
+    _onClickModifyChecklist() {
+        this.validateChecklist(this.selectedInspection.checklist);
+    }
+    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: '추가 도면 보기'
+        });
+    }
+};
+BuildingInspectionGridDetail.styles = [
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: 75px auto;
+        color: #4e5055;
+
+        width: 100%;
+        background-color: #f7f7f7;
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      md-filled-button {
+        --md-filled-button-container-color: #0595e5;
+        --md-filled-button-container-height: 30px;
+        --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-outlined-button {
+        color: #586878;
+        font-weight: bold;
+        --md-outlined-button-label-text-size: 13px;
+        --md-outlined-button-container-height: 30px;
+        --md-outlined-button-trailing-space: 15px;
+        --md-outlined-button-leading-space: 15px;
+      }
+      md-filled-select {
+        width: auto;
+        min-width: 150px;
+        --md-filled-select-text-field-container-color: transparent;
+        --md-filled-select-text-field-active-indicator-color: #999;
+        --md-filled-select-text-field-input-text-size: 14px;
+        --md-filled-select-text-field-input-text-weight: bold;
+        --md-filled-select-text-field-input-text-line-height: 6px;
+      }
+      md-filled-select[level] {
+        min-width: 110px;
+        margin-left: 20px;
+      }
+
+      md-icon[request],
+      md-icon[pass],
+      md-icon[fail] {
+        width: 20px;
+        height: 20px;
+        margin-right: 4px;
+        border-radius: 5px;
+        font-size: 21px;
+        font-weight: 700;
+        color: #fff;
+      }
+      md-icon[request] {
+        background-color: #4e5055;
+      }
+      md-icon[pass] {
+        background-color: #4bbb4a;
+      }
+      md-icon[fail] {
+        background-color: #ff4444;
+      }
+
+      *[bold] {
+        font-weight: bold;
+      }
+
+      div[header] {
+        display: flex;
+        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] {
+          display: flex;
+          align-items: center;
+          justify-content: end;
+          flex: 0.5;
+
+          md-elevated-button {
+            margin: 0px 3px;
+
+            --md-elevated-button-container-height: 35px;
+            --md-elevated-button-label-text-size: 16px;
+            --md-elevated-button-container-color: #0595e5;
+
+            --md-elevated-button-label-text-color: #fff;
+            --md-elevated-button-hover-label-text-color: #fff;
+            --md-elevated-button-pressed-label-text-color: #fff;
+            --md-elevated-button-focus-label-text-color: #fff;
+            --md-elevated-button-icon-color: #fff;
+            --md-elevated-button-hover-icon-color: #fff;
+            --md-elevated-button-pressed-icon-color: #fff;
+            --md-elevated-button-focus-icon-color: #fff;
+          }
+        }
+      }
+
+      div[body] {
+        display: grid;
+        grid-template-columns: 1fr 200px;
+        margin: 0px 25px 25px 25px;
+        gap: 10px;
+        min-height: fit-content;
+
+        h3 {
+          color: #2e79be;
+          font-size: 18px;
+          margin: 0px;
+        }
+
+        & > div {
+          display: flex;
+          gap: 10px;
+          border-radius: 5px;
+        }
+
+        div[left] {
+          flex-direction: column;
+
+          div[select] {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: #2ea4df1a;
+            border: 1px solid #2ea4df33;
+            font-size: 18px;
+            padding: 7px 10px;
+            border-radius: 5px;
+            gap: 12px;
+
+            & > div[state] {
+              display: flex;
+              font-size: 15px;
+              margin-right: 12px;
+              gap: 10px;
+
+              & > span {
+                display: flex;
+                align-items: center;
+                margin-left: 15px;
+                gap: 2px;
+              }
+            }
+          }
+
+          div[drawing] {
+            width: 100%;
+            background-color: #ffffff;
+            border: 1px solid #cccccc;
+            border-radius: 5px;
+            position: relative;
+          }
+
+          img {
+            width: 100%;
+            background-size: contain;
+          }
+
+          div[grid] {
+            display: flex;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            border: 1px #ccc solid;
+            justify-content: space-between;
+
+            & > div[row] {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              flex: 1;
+
+              & > div[column] {
+                flex: 1;
+                border: dashed 1px #2ea4df99;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
+            }
+
+            div[row='1'] div[column] {
+              border-left: none !important;
+            }
+            div[row]:last-of-type div[column] {
+              border-right: none !important;
+            }
+            div[column='1'] {
+              border-top: none !important;
+            }
+            div[column]:last-of-type {
+              border-bottom: none !important;
+            }
+
+            div[cell] {
+              &[status='WAIT'],
+              &[status='REQUEST'],
+              &[status='OVERALL_WAIT'],
+              &[status='OVERALL_REQUEST'],
+              &[status='PASS'],
+              &[status='FAIL'] {
+                background-color: #2ea4df1a;
+              }
+
+              &[active] {
+                background-color: #2ea4df99;
+              }
+            }
+          }
+        }
+
+        div[right] {
+          flex-direction: column;
+          gap: 15px;
+
+          & > div {
+            background-color: #ffffff;
+            border: 1px solid #cccccc80;
+            padding: 11px 12px 15px 12px;
+            border-radius: 5px;
+          }
+
+          div[top] {
+            div[content] {
+              display: grid;
+              grid-template-columns: 1fr 1fr;
+              gap: 5px;
+              align-items: center;
+              margin-top: 8px;
+              justify-content: space-between;
+
+              span {
+                display: flex;
+                align-items: center;
+                min-width: 55px;
+              }
+            }
+          }
+
+          div[bottom] {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            gap: 10px;
+
+            & > div {
+              display: flex;
+              flex-direction: column;
+              gap: 9px;
+
+              hr {
+                border: 1px #cccccc dashed;
+                width: 100%;
+                margin: 0;
+              }
+            }
+
+            div[view] {
+              flex: 1;
+
+              div[status] {
+                display: flex;
+                align-items: center;
+                margin-bottom: 7px;
+              }
+
+              div[date],
+              div[manager] {
+                font-size: 14px;
+              }
+            }
+
+            div[edit] {
+              flex: 1;
+            }
+
+            md-elevated-button {
+              --md-elevated-button-container-color: #fafafa;
+
+              --md-elevated-button-label-text-color: #586878;
+              --md-elevated-button-hover-label-text-color: #586878;
+              --md-elevated-button-pressed-label-text-color: #586878;
+              --md-elevated-button-focus-label-text-color: #586878;
+              --md-elevated-button-icon-color: #586878;
+              --md-elevated-button-hover-icon-color: #586878;
+              --md-elevated-button-pressed-icon-color: #586878;
+              --md-elevated-button-focus-icon-color: #586878;
+            }
+          }
+        }
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "buildingInspections", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "buildingInspectionSummaryOfProject", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "buildingInspectionSummaryOfBuildingLevel", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "selectedBuilding", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "selectedLevel", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "selectedInspection", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionGridDetail.prototype, "cell", void 0);
+__decorate([
+    query('md-filled-select[building]'),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "htmlSelectBuilding", void 0);
+__decorate([
+    query('md-filled-select[level]'),
+    __metadata("design:type", Object)
+], BuildingInspectionGridDetail.prototype, "htmlSelectLevel", void 0);
+BuildingInspectionGridDetail = __decorate([
+    customElement('building-inspection-grid-detail')
+], BuildingInspectionGridDetail);
+export { BuildingInspectionGridDetail };
+//# sourceMappingURL=building-inspection-grid-detail.js.map