@dssp/supervision 1.0.0-alpha.7 → 1.0.0-alpha.74

package/dist-client/pages/building-inspection/building-inspection-management.js

@@ -0,0 +1,1256 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@material/web/button/filled-button.js';
+import '@material/web/button/outlined-button.js';
+import '@operato/image-marker/ox-image-marker-view.js';
+import '@operato/input/ox-select-floor.js';
+import '@operato/data-grist';
+import '@operato/event-view/ox-event-view.js';
+import './inspection-create-popup';
+import './inspection-with-checklist-create-popup';
+import './component/daily-worklog-popup';
+import './component/inspection-document/photo-album-popup';
+import './component/inspection-document/inspection-request-document';
+import './component/inspection-document/inspection-result-notification';
+import './component/image-preview-popup';
+import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
+import { PageView, navigate } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { DataGrist } from '@operato/data-grist';
+import { client } from '@operato/graphql';
+import { notify, openPopup } from '@operato/layout';
+import gql from 'graphql-tag';
+import moment from 'moment-timezone';
+import { BuildingInspectionStatus, BUILDING_INSPECTION_STATUS_DISPLAY, BUILDING_INSPECTION_RE_STATUS_DISPLAY } from './building-inspection-list';
+import { InspectionEventProvider } from './component/inspection-event-provider';
+import { DailyWorklogMode } from './component/daily-worklog-popup';
+import '../checklist/checklist-view';
+import { getBuildingInspectionForChecklist } from '../../graphql/building-inspection';
+import { InspectionMode } from './component/inspection-document/inspection-request-document';
+import { DrawingImageProvider } from '@dssp/drawing/dist-client/drawing-management/drawing-image-provider.js';
+let BuildingInspectionManagement = class BuildingInspectionManagement extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.defaultProject = {
+            name: '',
+            buildingComplex: {
+                buildings: []
+            }
+        };
+        this.projectId = '';
+        this.project = Object.assign({}, this.defaultProject);
+        this.selectedBuilding = {};
+        this.building = {};
+        this.currentFloor = -1;
+        this.buildingLevelId = '';
+        this.buildingInspectionSummary = {};
+        this.selectedYearMonth = moment().tz('Asia/Seoul').format('YYYY-MM');
+        this.selectedDate = moment().tz('Asia/Seoul').format('YYYY-MM-DD');
+        this.dailyWorklog = {};
+        this.viewMode = 'calendar';
+    }
+    get context() {
+        return {
+            title: '업무 대시보드'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const cards = ((_b = (_a = this.building) === null || _a === void 0 ? void 0 : _a.buildingLevels) === null || _b === void 0 ? void 0 : _b.map(({ mainDrawingImage, floor }) => {
+            return {
+                image: mainDrawingImage || '/assets/images/img-drawing-default.png',
+                name: floor
+            };
+        })) || [];
+        return html `
+      <div header>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          업무 대시보드
+        </h2>
+      </div>
+
+      <div body>
+        <div left>
+          <div>
+            <div subject bold>개별 단지 상세정보 바로가기</div>
+            <div building-container>
+              ${(_d = (_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.buildings) === null || _d === void 0 ? void 0 : _d.map(building => {
+            return this.selectedBuilding.id === building.id
+                ? html `
+                      <md-filled-button @click=${() => this._onClickBuilding(building)}> ${building.name} </md-filled-button>
+                    `
+                : html `
+                      <md-outlined-button @click=${() => this._onClickBuilding(building)}> ${building.name} </md-outlined-button>
+                    `;
+        })}
+            </div>
+          </div>
+
+          <ox-select-floor
+            .cards=${cards}
+            .bottomLimit=${70}
+            .interval=${50}
+            @change=${(e) => {
+            this.currentFloor = e.detail;
+        }}
+          >
+            ${(_f = (_e = this.building) === null || _e === void 0 ? void 0 : _e.buildingLevels) === null || _f === void 0 ? void 0 : _f.map(({ id, floor, floorDisplayName, inspectionSummary }, idx) => {
+            return html `
+                <div slot="template-${idx}" @click=${() => this._onSelectFloor(id)} style="cursor: pointer;">
+                  <div status>
+                    <div content>
+                      <span><md-icon wait slot="icon">frame_inspect</md-icon>${inspectionSummary.wait}</span>
+                      <span><md-icon request slot="icon">exclamation</md-icon>${inspectionSummary.request}</span>
+                      <span><md-icon pass slot="icon">check</md-icon>${inspectionSummary.pass}</span>
+                      <span><md-icon fail slot="icon">close</md-icon>${inspectionSummary.fail}</span>
+                    </div>
+                    <span name ?active=${this.currentFloor == floor}>${floorDisplayName}층</span>
+                  </div>
+                </div>
+              `;
+        })}
+          </ox-select-floor>
+        </div>
+
+        <div right-panel>
+          ${this.buildingLevelId
+            ? html `
+                <div inspection-container>
+                  <div inspection>
+                    <div name bold>
+                      <md-icon slot="icon">fact_check</md-icon>
+                      검측 현황
+                    </div>
+
+                    <div>
+                      <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.WAIT]}</label>
+                      <span bold status="wait"> ${this.buildingInspectionSummary.wait}</span>
+                    </div>
+                    <div>
+                      <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.REQUEST]}</label>
+                      <span bold status="request"> ${this.buildingInspectionSummary.request}</span>
+                    </div>
+                    <div>
+                      <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.FAIL]}</label>
+                      <span bold status="fail"> ${this.buildingInspectionSummary.fail}</span>
+                    </div>
+                    <div>
+                      <label>재검측 대기</label>
+                      <span bold status="re-wait"> ${this.buildingInspectionSummary.reWait}</span>
+                    </div>
+                    <div>
+                      <label>${BUILDING_INSPECTION_STATUS_DISPLAY[BuildingInspectionStatus.PASS]}</label>
+                      <span bold status="pass"> ${this.buildingInspectionSummary.pass}</span>
+                    </div>
+                  </div>
+
+                  <div view-toggle>
+                    <md-icon ?active=${this.viewMode === 'calendar'} @click=${() => this._setViewMode('calendar')}>
+                      calendar_month
+                    </md-icon>
+                    <md-icon ?active=${this.viewMode === 'list'} @click=${() => this._setViewMode('list')}> view_list </md-icon>
+                  </div>
+
+                  <div calendar-wrapper style="display:${this.viewMode === 'calendar' ? 'block' : 'none'}">
+                    <ox-event-view
+                      .mode=${'monthly'}
+                      .eventProvider=${this.calendarData}
+                      @select-date=${(e) => {
+                this.selectedDate = moment(e.detail[0]).format('YYYY-MM-DD');
+                this._fetchDailyWorklog(this.selectedDate);
+            }}
+                      @change-month=${(e) => {
+                var _a, _b, _c;
+                const year = e.detail.year;
+                const month = (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.month) === null || _b === void 0 ? void 0 : _b.toString()) === null || _c === void 0 ? void 0 : _c.padStart(2, '0');
+                this.selectedYearMonth = `${year}-${month}`;
+                this._refreshListGrists();
+            }}
+                    ></ox-event-view>
+                  </div>
+                  <div list-wrapper style="display:${this.viewMode === 'list' ? 'block' : 'none'}">
+                    <div list-view>
+                      <div list-section>
+                        <h3 section-title>작업 완료 / 조치 필요</h3>
+                        <ox-grist
+                          section="wait-fail"
+                          .mode=${'GRID'}
+                          .config=${this.gristConfig}
+                          .fetchHandler=${this._fetchWaitFail.bind(this)}
+                        ></ox-grist>
+                      </div>
+                      <div list-section>
+                        <h3 section-title blue>감리 / 재검측 대기</h3>
+                        <ox-grist
+                          section="request"
+                          .mode=${'GRID'}
+                          .config=${this.gristConfig}
+                          .fetchHandler=${this._fetchRequest.bind(this)}
+                        ></ox-grist>
+                      </div>
+                      <div list-section>
+                        <h3 section-title green>검측 완료</h3>
+                        <ox-grist
+                          section="pass"
+                          .mode=${'GRID'}
+                          .config=${this.gristConfig}
+                          .fetchHandler=${this._fetchPass.bind(this)}
+                        ></ox-grist>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div action-buttons>
+                  <md-filled-button navy @click=${this._openFieldDocuments}>
+                    <md-icon slot="icon">search</md-icon>현장 문서 확인
+                  </md-filled-button>
+                  <div style="flex:1"></div>
+                  ${this.viewMode === 'calendar'
+                ? this.dailyWorklog.id
+                    ? html `<md-filled-button green @click=${this._openDailyWorklogPopup}>
+                          <md-icon slot="icon">edit</md-icon>일일 업무일지 수정
+                        </md-filled-button>`
+                    : html `<md-filled-button @click=${this._openDailyWorklogPopup}>
+                          <md-icon slot="icon">note_add</md-icon>일일 업무일지 작성
+                        </md-filled-button>`
+                : ''}
+                  ${this.viewMode === 'list'
+                ? html `<md-filled-button red @click=${this._deleteInspections}>
+                        <md-icon slot="icon">delete</md-icon>검측 삭제
+                      </md-filled-button>`
+                : ''}
+                  <md-filled-button navy-light @click=${this._openCreateInspection}>
+                    <md-icon slot="icon">check_circle</md-icon>검측 등록
+                  </md-filled-button>
+                </div>
+              `
+            : html `
+                <div style="display:flex;align-items:center;justify-content:center;flex:1;color:#999;">
+                  층을 선택하면 작업 현황이 표시됩니다.
+                </div>
+              `}
+        </div>
+      </div>
+    `;
+    }
+    async pageUpdated(changes, lifecycle) {
+        if (this.active) {
+            this.projectId = lifecycle.resourceId || '';
+            await this._initProject(this.projectId);
+        }
+    }
+    async pageInitialized(lifecycle) {
+        this.gristConfig = {
+            columns: [
+                { type: 'gutter', gutterName: 'sequence' },
+                { type: 'gutter', gutterName: 'row-selector', multiple: true },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'open_in_new',
+                    header: '상세보기',
+                    width: 60,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            navigate(`building-inspection-detail-drawing/${record.id}`);
+                        }
+                    }
+                },
+                {
+                    type: 'string',
+                    name: 'id',
+                    hidden: true
+                },
+                {
+                    type: 'string',
+                    name: 'statusDisplay',
+                    header: '검측 상태',
+                    record: { align: 'center' },
+                    width: 100
+                },
+                {
+                    type: 'string',
+                    name: 'location',
+                    header: '위치',
+                    width: 130
+                },
+                {
+                    type: 'string',
+                    name: 'constructionType',
+                    header: '공종',
+                    width: 120
+                },
+                {
+                    type: 'string',
+                    name: 'inspectionParts',
+                    header: '검측 부위',
+                    record: {
+                        renderer: value => (value === null || value === void 0 ? void 0 : value.join(', ')) || ''
+                    },
+                    width: 200
+                },
+                {
+                    type: 'string',
+                    name: 'requestDate',
+                    header: '검측 요청일시',
+                    width: 150
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'fact_check',
+                    header: '도면',
+                    width: 50,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openDrawingPopup(record);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'edit_square',
+                    header: '요청서/결과통보',
+                    width: 100,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openInspectionRequestDocument(record.id);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'task',
+                    header: '체크리스트',
+                    width: 70,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openChecklistPopup(record.id);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'photo_camera',
+                    header: '사진대지',
+                    width: 60,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._openPhotoAlbumPopup(record.checklistId);
+                        }
+                    }
+                },
+                {
+                    type: 'gutter',
+                    gutterName: 'button',
+                    icon: 'engineering',
+                    header: '실명부',
+                    width: 50,
+                    handlers: {
+                        click: (columns, data, column, record, rowIndex) => {
+                            this._showNameListPreview(record);
+                        }
+                    }
+                }
+            ],
+            rows: {
+                selectable: {
+                    multiple: true
+                },
+                appendable: false
+            },
+            sorters: [{ name: 'requestDate' }]
+        };
+    }
+    async _initProject(projectId = '') {
+        var _a, _b, _c;
+        const response = await client.query({
+            query: gql `
+        query Project($id: String!) {
+          project(id: $id) {
+            id
+            name
+            projectType
+            mainPhoto {
+              fullpath
+            }
+            buildingComplex {
+              id
+              drawing {
+                id
+                name
+                fullpath
+              }
+              buildings {
+                id
+                name
+                drawing {
+                  id
+                  name
+                  fullpath
+                }
+              }
+            }
+          }
+        }
+      `,
+            variables: {
+                id: projectId
+            }
+        });
+        if (response.errors)
+            return;
+        this.project = (_a = response.data) === null || _a === void 0 ? void 0 : _a.project;
+        // 첫번째 빌딩 선택
+        this.selectedBuilding = (_c = (_b = this.project) === null || _b === void 0 ? void 0 : _b.buildingComplex) === null || _c === void 0 ? void 0 : _c.buildings[0];
+        if (this.selectedBuilding) {
+            await this._getBuilding(this.selectedBuilding.id);
+        }
+    }
+    async _getBuilding(buildingId = '') {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query Building($id: String!) {
+          building(id: $id) {
+            id
+            buildingLevels {
+              id
+              floor
+              floorDisplayName
+              mainDrawing {
+                id
+                name
+                fullpath
+              }
+              mainDrawingImage
+              inspectionSummary {
+                wait
+                request
+                pass
+                fail
+              }
+            }
+          }
+        }
+      `,
+            variables: {
+                id: buildingId
+            }
+        });
+        if (response.errors)
+            return;
+        this.building = (_a = response.data) === null || _a === void 0 ? void 0 : _a.building;
+        // 왼쪽 패널 스크롤을 맨 아래로
+        await this.updateComplete;
+        if (this.leftPanel) {
+            this.leftPanel.scrollTop = this.leftPanel.scrollHeight;
+        }
+    }
+    async _onClickBuilding(building) {
+        this.selectedBuilding = Object.assign({}, building);
+        this.buildingLevelId = '';
+        this.buildingInspectionSummary = {};
+        await this._getBuilding(this.selectedBuilding.id);
+    }
+    async _onSelectFloor(levelId) {
+        this.buildingLevelId = levelId;
+        await this._initBuildingLevel(levelId);
+    }
+    async _initBuildingLevel(buildingLevelId) {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query BuildingInspectionSummaryOfBuildingLevel($buildingLevelId: String!) {
+          buildingInspectionSummaryOfBuildingLevel(buildingLevelId: $buildingLevelId) {
+            wait
+            request
+            pass
+            fail
+            reWait
+          }
+        }
+      `,
+            variables: {
+                buildingLevelId
+            }
+        });
+        if (response.errors)
+            return;
+        this.buildingInspectionSummary = (_a = response.data) === null || _a === void 0 ? void 0 : _a.buildingInspectionSummaryOfBuildingLevel;
+        // 달력 데이터 생성
+        this.calendarData = new InspectionEventProvider(buildingLevelId, this.project.id);
+        // 달력 최소 높이 속성 수정
+        await this.updateComplete;
+        // 일일 업무일지 조회
+        await this._fetchDailyWorklog(this.selectedDate);
+        // 목록 모드일 경우 그리스트 갱신
+        this._refreshListGrists();
+    }
+    async _fetchInspectionsByStatus(statuses, { page = 1, limit = 100 }, extraFilter) {
+        var _a, _b;
+        if (!this.buildingLevelId)
+            return { total: 0, records: [] };
+        const response = await client.query({
+            query: gql `
+        query BuildingInspectionsOfBuildingLevel($params: BuildingInspectionsOfBuildingLevel!) {
+          buildingInspectionsOfBuildingLevel(params: $params) {
+            items {
+              id
+              status
+              failCount
+              requestDate
+
+              checklist {
+                checklistId: id
+                name
+                constructionType
+                constructionDetailType
+                location
+                inspectionParts
+                inspectionDrawingType
+
+                nameListAttachment {
+                  id
+                  name
+                  fullpath
+                }
+              }
+              drawingMarker
+            }
+            total
+          }
+        }
+      `,
+            variables: {
+                params: {
+                    buildingLevelId: this.buildingLevelId,
+                    limit: 0
+                }
+            }
+        });
+        let items = ((_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.buildingInspectionsOfBuildingLevel) === null || _b === void 0 ? void 0 : _b.items) || [];
+        // 상태별 필터링
+        items = items.filter(item => statuses.includes(item.status));
+        if (extraFilter) {
+            items = items.filter(extraFilter);
+        }
+        items = items.map(item => (Object.assign(Object.assign(Object.assign({}, item), item.checklist), { statusDisplay: (item.failCount > 0 ? BUILDING_INSPECTION_RE_STATUS_DISPLAY : BUILDING_INSPECTION_STATUS_DISPLAY)[item.status], requestDate: this._formatDateTime(item.requestDate) })));
+        return {
+            total: items.length,
+            records: items
+        };
+    }
+    async _fetchWaitFail(options) {
+        return this._fetchInspectionsByStatus([BuildingInspectionStatus.WAIT, BuildingInspectionStatus.OVERALL_WAIT, BuildingInspectionStatus.FAIL], options, 
+        // 재검측 대기(failCount > 0인 WAIT) 제외
+        item => !((item.status === BuildingInspectionStatus.WAIT || item.status === BuildingInspectionStatus.OVERALL_WAIT) &&
+            (item.failCount || 0) > 0));
+    }
+    async _fetchRequest(options) {
+        return this._fetchInspectionsByStatus([
+            BuildingInspectionStatus.REQUEST,
+            BuildingInspectionStatus.OVERALL_REQUEST,
+            BuildingInspectionStatus.WAIT,
+            BuildingInspectionStatus.OVERALL_WAIT
+        ], options, 
+        // REQUEST/OVERALL_REQUEST 전체 + 재검측 대기(failCount > 0인 WAIT)만
+        item => item.status === BuildingInspectionStatus.REQUEST ||
+            item.status === BuildingInspectionStatus.OVERALL_REQUEST ||
+            ((item.status === BuildingInspectionStatus.WAIT || item.status === BuildingInspectionStatus.OVERALL_WAIT) &&
+                (item.failCount || 0) > 0));
+    }
+    async _fetchPass(options) {
+        return this._fetchInspectionsByStatus([BuildingInspectionStatus.PASS], options);
+    }
+    _setViewMode(mode) {
+        this.viewMode = mode;
+        if (mode === 'list') {
+            this.updateComplete.then(() => this._refreshListGrists());
+        }
+    }
+    _refreshListGrists() {
+        if (this.viewMode === 'list') {
+            this.updateComplete.then(() => {
+                var _a, _b, _c;
+                (_a = this.gristWaitFail) === null || _a === void 0 ? void 0 : _a.fetch();
+                (_b = this.gristRequest) === null || _b === void 0 ? void 0 : _b.fetch();
+                (_c = this.gristPass) === null || _c === void 0 ? void 0 : _c.fetch();
+            });
+        }
+    }
+    _formatDateTime(date) {
+        if (!date)
+            return '';
+        try {
+            const parsed = typeof date === 'string' && /^\d+$/.test(date) ? new Date(Number(date)) : new Date(date);
+            return new Intl.DateTimeFormat('ko-KR', {
+                timeZone: 'Asia/Seoul',
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: false
+            }).format(parsed);
+        }
+        catch (_a) {
+            return '';
+        }
+    }
+    _openDailyWorklogPopup() {
+        const date = this.selectedDate;
+        openPopup(html `<daily-worklog-popup
+        .project=${this.project}
+        .date=${date}
+        .dailyWorklog=${this.dailyWorklog}
+        .mode=${this.dailyWorklog.id ? DailyWorklogMode.EDIT : DailyWorklogMode.CREATE}
+        @createdDailyWorklog=${this._refreshCalendar.bind(this)}
+        @updatedDailyWorklog=${() => this._fetchDailyWorklog(this.selectedDate)}
+      ></daily-worklog-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: '일일 업무일지 작성'
+        });
+    }
+    async _deleteInspections() {
+        var _a, _b, _c;
+        const allSelected = [
+            ...(((_a = this.gristWaitFail) === null || _a === void 0 ? void 0 : _a.selected) || []),
+            ...(((_b = this.gristRequest) === null || _b === void 0 ? void 0 : _b.selected) || []),
+            ...(((_c = this.gristPass) === null || _c === void 0 ? void 0 : _c.selected) || [])
+        ];
+        const ids = allSelected.map(record => record.id);
+        if (!ids.length) {
+            notify({ message: '삭제할 항목을 선택해주세요.', level: 'info' });
+            return;
+        }
+        if (confirm('삭제하시겠습니까?')) {
+            const response = await client.mutate({
+                mutation: gql `
+          mutation ($ids: [String!]!) {
+            deleteBuildingInspections(ids: $ids)
+          }
+        `,
+                variables: { ids }
+            });
+            if (!response.errors) {
+                this._refreshListGrists();
+                this._initBuildingLevel(this.buildingLevelId);
+                notify({ message: '삭제되었습니다.' });
+            }
+        }
+    }
+    _openCreateInspection() {
+        openPopup(html `
+        <inspection-with-checklist-create-popup
+          .projectId=${this.project.id}
+          .selectedBuildingId=${this.selectedBuilding.id}
+          .selectedBuildingLevelId=${this.buildingLevelId}
+          @requestRefresh="${() => {
+            this._initBuildingLevel(this.buildingLevelId);
+            this._getBuilding(this.selectedBuilding.id);
+        }}"
+        ></inspection-with-checklist-create-popup>
+      `, { backdrop: true, size: 'large', title: '검측 등록' });
+    }
+    // TODO: 현장 문서 확인 기능 구현
+    _openFieldDocuments() {
+        notify({ message: '현장 문서 확인 기능은 준비 중입니다.', level: 'info' });
+    }
+    async _openDrawingPopup(buildingInspection) {
+        const drawingImageProvider = new DrawingImageProvider();
+        const inspectionDrawingType = buildingInspection.inspectionDrawingType;
+        const drawingShapes = JSON.parse((buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.drawingMarker) || null) || [];
+        const markers = await drawingImageProvider.getMarkers(inspectionDrawingType);
+        const imageUrl = String(inspectionDrawingType).normalize('NFC');
+        const shapes = [...drawingShapes, ...markers];
+        openPopup(html `<ox-image-marker-view
+        style="pointer-events: none;"
+        id="image-marker"
+        .imageUrl=${imageUrl}
+        .shapes=${shapes}
+        .imageProvider=${drawingImageProvider}
+      ></ox-image-marker-view>`, { backdrop: true, size: 'large', title: '검측 도면' });
+    }
+    async _openInspectionRequestDocument(buildingInspectionId) {
+        const buildingInspection = await getBuildingInspectionForChecklist(buildingInspectionId);
+        if (!buildingInspection.checklist.inspectionRequestUpdatedAt) {
+            notify({ message: '검측 요청서가 없습니다.', level: 'info' });
+            return;
+        }
+        openPopup(html `
+        <div style="overflow-y: auto;">
+          <inspection-request-document
+            .checklist=${buildingInspection.checklist}
+            .buildingInspection=${buildingInspection}
+            .mode=${InspectionMode.VIEW}
+          ></inspection-request-document>
+
+          ${buildingInspection.checklist.inspectionResultUpdatedAt
+            ? html `
+                <hr />
+                <inspection-result-notification
+                  .checklist=${buildingInspection.checklist}
+                  .buildingInspection=${buildingInspection}
+                  .mode=${InspectionMode.VIEW}
+                ></inspection-result-notification>
+              `
+            : ''}
+        </div>
+      `, { backdrop: true, size: 'large', title: '검측요청결과 통보내용' });
+    }
+    async _openChecklistPopup(buildingInspectionId) {
+        var _a, _b;
+        const buildingInspection = await getBuildingInspectionForChecklist(buildingInspectionId);
+        openPopup(html `
+        <div style="overflow-y: auto;">
+          <checklist-view
+            .mode=${"VIEWER" /* ChecklistMode.VIEWER */}
+            .checklist=${buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.checklist}
+            .buildingComplex=${((_b = (_a = buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.buildingLevel) === null || _a === void 0 ? void 0 : _a.building) === null || _b === void 0 ? void 0 : _b.buildingComplex) || {}}
+            .status=${buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.status}
+            .failCount=${(buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.failCount) || 0}
+            .projectType=${this.project.projectType}
+          ></checklist-view>
+        </div>
+      `, { backdrop: true, size: 'large', title: '체크 리스트 미리보기' });
+    }
+    _openPhotoAlbumPopup(checklistId) {
+        openPopup(html `<photo-album-popup .checklistId=${checklistId}></photo-album-popup>`, {
+            backdrop: true,
+            size: 'large',
+            title: '사진대지'
+        });
+    }
+    _showNameListPreview(record) {
+        const nameListAttachment = record.nameListAttachment;
+        if (!nameListAttachment) {
+            notify({ message: '실명부 파일이 없습니다.', level: 'info' });
+            return;
+        }
+        openPopup(html `
+        <image-preview-popup
+          .images=${[{ fullpath: nameListAttachment.fullpath, name: nameListAttachment.name }]}
+          .currentIndex=${0}
+        ></image-preview-popup>
+      `, { backdrop: true, size: 'large', title: '실명부' });
+    }
+    async _refreshCalendar() {
+        this.calendarData = new InspectionEventProvider(this.buildingLevelId, this.project.id);
+        await this._fetchDailyWorklog(this.selectedDate);
+    }
+    async _fetchDailyWorklog(date = '') {
+        var _a;
+        if (!date || !this.project.id)
+            return;
+        const response = await client.query({
+            query: gql `
+        query ($projectId: String!, $date: String!) {
+          buildingInspectionDailyWorklogByProjectIdAndDate(projectId: $projectId, date: $date) {
+            id
+            date
+            documentNo
+            worklogs
+            memo
+            directiveMemo
+            taskSupervisorySignature
+            overallSupervisorySignature
+
+            taskSupervisory {
+              id
+              name
+            }
+            overallSupervisory {
+              id
+              name
+            }
+
+            buildingInspections {
+              id
+
+              checklist {
+                overallSupervisorySignature
+                taskSupervisorySignature
+                taskSupervisory {
+                  id
+                  name
+                }
+                overallSupervisory {
+                  id
+                  name
+                }
+              }
+            }
+          }
+        }
+      `,
+            variables: { projectId: this.project.id, date }
+        });
+        this.dailyWorklog = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.buildingInspectionDailyWorklogByProjectIdAndDate) || {};
+    }
+};
+BuildingInspectionManagement.styles = [
+    ScrollbarStyles,
+    CommonGristStyles,
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: 55px 1fr;
+        color: #4e5055;
+
+        width: 100%;
+        height: 100%;
+        background-color: var(--md-sys-color-background, #f6f6f6);
+        overflow: hidden;
+      }
+
+      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[green] {
+        --md-filled-button-container-color: #008000;
+      }
+
+      md-outlined-button {
+        --md-outlined-button-container-height: 30px;
+        --md-outlined-button-trailing-space: var(--spacing-medium, 8px);
+        --md-outlined-button-leading-space: var(--spacing-medium, 8px);
+        --md-sys-color-outline: rgba(51, 51, 51, 0.2);
+      }
+
+      *[bold] {
+        font-weight: bold;
+      }
+
+      div[header] {
+        display: flex;
+        margin: 0px var(--spacing-large, 12px);
+
+        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[header] div[button-container] {
+        display: flex;
+        align-items: center;
+        justify-content: end;
+        flex: 0.5;
+      }
+
+      div[body] {
+        display: grid;
+        grid-template-columns: 4fr 6fr;
+        margin: var(--spacing-large, 12px);
+        margin-top: 0;
+        gap: var(--spacing-medium, 8px);
+        overflow: hidden;
+      }
+
+      h3 {
+        color: #2e79be;
+        font-size: 16px;
+        margin: 0px;
+      }
+
+      div[body] > div {
+        display: flex;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-large, 12px);
+        border-radius: 5px;
+      }
+
+      div[left] {
+        flex-direction: column;
+        background-color: var(--md-sys-color-on-primary);
+        border: 1px solid #cccccc80;
+        overflow-y: auto;
+      }
+
+      div[subject] {
+        margin-bottom: var(--spacing-small, 4px);
+      }
+
+      div[building-container] {
+        display: block;
+
+        & > * {
+          margin-right: var(--spacing-medium, 8px);
+          margin-bottom: var(--spacing-medium, 8px);
+        }
+      }
+
+      div[right] {
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+        flex-direction: column;
+        position: relative;
+      }
+
+      ox-select-floor {
+        width: 100%;
+        align-content: flex-end;
+
+        --ox-select-floor-rotate-x: 60deg;
+        --ox-select-floor-rotate-x-active: 30deg;
+        --ox-select-floor-perspective: 1200px;
+
+        user-select: none;
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      div[status] {
+        display: flex;
+        position: absolute;
+        right: 0px;
+        bottom: 0px;
+        align-items: center;
+        z-index: 2;
+        right: 3%;
+      }
+
+      div[status] > div[content] {
+        display: flex;
+        background-color: #4e5055;
+        color: #fff;
+        padding: var(--spacing-small, 4px) var(--spacing-medium, 8px);
+        border-radius: 5px;
+        gap: var(--spacing-medium, 8px);
+        font-size: 14px;
+      }
+
+      div[status] span {
+        display: flex;
+        align-items: center;
+        width: 40px;
+        font-weight: bold;
+      }
+
+      div[status] md-icon {
+        width: 16px;
+        height: 16px;
+        margin-right: var(--spacing-small, 4px);
+        border-radius: 5px;
+        font-size: 16px;
+        font-weight: 700;
+      }
+      div[status] md-icon[wait] {
+        background-color: #f7f7f7;
+        color: #4e5055;
+      }
+      div[status] md-icon[request] {
+        background-color: #f7f7f7;
+        color: #4e5055;
+      }
+      div[status] md-icon[pass] {
+        background-color: #4bbb4a;
+      }
+      div[status] md-icon[fail] {
+        background-color: #ff4444;
+      }
+
+      span[name] {
+        color: #4e5055;
+        margin-left: var(--spacing-small, 4px);
+        padding: var(--spacing-tiny, 2px) var(--spacing-small, 4px);
+      }
+
+      span[name][active] {
+        color: var(--md-sys-color-on-error);
+        background-color: var(--md-sys-color-error);
+        border-radius: 5px;
+        opacity: 0.7;
+      }
+
+      /* 오른쪽 패널 */
+      div[right-panel] {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      div[inspection-container] {
+        gap: var(--spacing-medium, 8px);
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+
+        div[inspection] {
+          display: grid;
+          grid-template-columns: 90px 1fr 1fr 1fr 1fr 1fr;
+          background: #ebc8321a;
+          border-radius: 5px;
+          padding: var(--spacing-medium, 8px) var(--spacing-large, 12px);
+
+          & > div {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+
+            span::before {
+              display: inline-block;
+              position: relative;
+              content: '';
+              width: 10px;
+              height: 10px;
+              border-radius: 6px;
+              top: -1px;
+              margin-right: 2px;
+            }
+
+            span[status='wait']::before {
+              background-color: #4e5055;
+            }
+            span[status='request']::before {
+              background-color: #2e79be;
+            }
+            span[status='pass']::before {
+              background-color: #1bb401;
+            }
+            span[status='fail']::before {
+              background-color: #ff4444;
+            }
+            span[status='re-wait']::before {
+              background-color: #e89c0e;
+            }
+          }
+          & > div[name] {
+            flex-direction: row;
+            text-align: right;
+            gap: var(--spacing-small, 4px);
+            padding-right: var(--spacing-large, 12px);
+            border-right: 2px dotted #ccc;
+            max-width: 100%;
+            line-height: 1.3;
+
+            md-icon {
+              width: 40px;
+              height: 40px;
+              border-radius: 5px;
+              color: #fff;
+              background: #f16154;
+            }
+          }
+        }
+      }
+
+      div[view-toggle] {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--spacing-small, 4px);
+
+        md-icon {
+          cursor: pointer;
+          padding: 4px;
+          border-radius: 4px;
+          font-size: 24px;
+        }
+
+        md-icon[active] {
+          background-color: #0595e5;
+          color: white;
+        }
+      }
+
+      ox-event-view {
+        flex: 1;
+        overflow-y: auto;
+        --calendar-monthly-date-min-height: 50px;
+        height: 100%;
+      }
+
+      div[calendar-wrapper] {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      div[list-wrapper] {
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      div[action-buttons] {
+        flex-shrink: 0;
+      }
+
+      div[list-view] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-medium, 8px);
+        overflow-y: auto;
+        flex: 1;
+      }
+
+      div[list-section] {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-small, 4px);
+
+        h3[section-title] {
+          color: #e15757;
+          font-size: 14px;
+          margin: 0;
+        }
+
+        h3[section-title][blue] {
+          color: #3395f1;
+        }
+
+        h3[section-title][green] {
+          color: #1bb401;
+        }
+      }
+
+      ox-grist {
+        overflow-y: auto;
+        flex: 1;
+        min-height: 150px;
+      }
+
+      div[action-buttons] {
+        display: flex;
+        justify-content: center;
+        gap: var(--spacing-medium, 8px);
+        padding: var(--spacing-medium, 8px) 0;
+
+        md-filled-button {
+          --md-filled-button-container-height: 40px;
+          --md-filled-button-trailing-space: 20px;
+          --md-filled-button-leading-space: 20px;
+        }
+
+        md-filled-button[green] {
+          --md-filled-button-container-color: #008000;
+        }
+
+        md-filled-button[red] {
+          --md-filled-button-container-color: #e15757;
+        }
+
+        md-filled-button[navy] {
+          --md-filled-button-container-color: #3f71a0;
+        }
+
+        md-filled-button[navy-light] {
+          --md-filled-button-container-color: #2e8b8b;
+        }
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionManagement.prototype, "projectId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionManagement.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionManagement.prototype, "selectedBuilding", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionManagement.prototype, "building", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionManagement.prototype, "currentFloor", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionManagement.prototype, "buildingLevelId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionManagement.prototype, "buildingInspectionSummary", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionManagement.prototype, "calendarData", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionManagement.prototype, "selectedYearMonth", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionManagement.prototype, "selectedDate", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionManagement.prototype, "dailyWorklog", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], BuildingInspectionManagement.prototype, "viewMode", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionManagement.prototype, "gristConfig", void 0);
+__decorate([
+    query('div[left]'),
+    __metadata("design:type", HTMLElement)
+], BuildingInspectionManagement.prototype, "leftPanel", void 0);
+__decorate([
+    query('ox-grist[section="wait-fail"]'),
+    __metadata("design:type", DataGrist)
+], BuildingInspectionManagement.prototype, "gristWaitFail", void 0);
+__decorate([
+    query('ox-grist[section="request"]'),
+    __metadata("design:type", DataGrist)
+], BuildingInspectionManagement.prototype, "gristRequest", void 0);
+__decorate([
+    query('ox-grist[section="pass"]'),
+    __metadata("design:type", DataGrist)
+], BuildingInspectionManagement.prototype, "gristPass", void 0);
+__decorate([
+    query('ox-event-view'),
+    __metadata("design:type", HTMLElement)
+], BuildingInspectionManagement.prototype, "eventView", void 0);
+BuildingInspectionManagement = __decorate([
+    customElement('building-inspection-management')
+], BuildingInspectionManagement);
+export { BuildingInspectionManagement };
+//# sourceMappingURL=building-inspection-management.js.map