@dssp/project 1.0.0 → 1.0.2

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

@@ -0,0 +1,1065 @@
+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 { navigate, PageView } from '@operato/shell';
+import { css, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { client } from '@operato/graphql';
+import { ScrollbarStyles } from '@operato/styles';
+import gql from 'graphql-tag';
+import { BUILDING_INSPECTION_STATUS, BUILDING_INSPECTION_RE_STATUS, ProjectType } from './project-list';
+import _getWeather from '../lib/waether';
+import '@operato/chart/ox-progress-circle.js';
+import { isProjectTypeDomain } from '../../shared/domain-context';
+let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
+    constructor() {
+        super(...arguments);
+        this.defaultProject = {
+            name: '',
+            buildingComplex: {
+                address: '',
+                area: 0,
+                constructionCompany: '',
+                clientCompany: '',
+                supervisoryCompany: '',
+                designCompany: '',
+                constructionType: '',
+                buildings: []
+            }
+        };
+        this.projectId = '';
+        this.project = Object.assign({}, this.defaultProject);
+        this.buildingInspections = [];
+        this.inspectionSummary = {
+            wait: 0,
+            request: 0,
+            pass: 0,
+            fail: 0,
+            reWait: 0
+        };
+        this.statusFilter = '';
+        this.configProjectType = '';
+        this.weather = {
+            rain: 0,
+            temperature: 0,
+            humidity: 0,
+            windDirection: '',
+            windSpeed: 0
+        };
+    }
+    get context() {
+        var _a;
+        return {
+            title: !isProjectTypeDomain() && ((_a = this.project) === null || _a === void 0 ? void 0 : _a.name)
+                ? `진행 중 프로젝트 상세 정보 - ${this.project.name}`
+                : '진행 중 프로젝트 상세 정보'
+        };
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        let totalInspectionCount = this.inspectionSummary.pass + this.inspectionSummary.fail + this.inspectionSummary.request + this.inspectionSummary.wait;
+        return html `
+      <div header>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.project.name}
+        </h2>
+        <div button-container>
+          ${this.configProjectType === ProjectType.DCSP
+            ? html `
+                <md-elevated-button href="employee-list"> <md-icon slot="icon">badge</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 href=${`project-task/${this.project.id}`}>
+                  <md-icon slot="icon">event_note</md-icon>공정표 관리
+                </md-elevated-button>
+                <md-elevated-button href=${`project-checklist-management/${this.project.id}`}>
+                  <md-icon slot="icon">checklist</md-icon>체크리스트 관리
+                </md-elevated-button>
+                <md-elevated-button href=${`building-inspection-management/${this.project.id}`}>
+                  <md-icon slot="icon">open_in_new</md-icon>업무 바로가기
+                </md-elevated-button>
+              `
+            : html `
+                <md-elevated-button
+                  target="_blank"
+                  href=${((_a = this.project.buildingComplex) === null || _a === void 0 ? void 0 : _a.virtualTourLink) || ''}
+                  ?disabled=${!((_b = this.project.buildingComplex) === null || _b === void 0 ? void 0 : _b.virtualTourLink)}
+                >
+                  <md-icon slot="icon">smart_toy</md-icon>Virtual Tour
+                </md-elevated-button>
+                <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 href=${`project-task/${this.project.id}`}>
+                  <md-icon slot="icon">event_note</md-icon>공정표 관리
+                </md-elevated-button>
+              `}
+        </div>
+      </div>
+
+      <div body>
+        <div>
+          <div left-top>
+            <h3>
+              기본 정보
+              <md-elevated-button href=${`project-update/${this.project.id}`}>
+                <md-icon slot="icon">assignment</md-icon>프로젝트 정보 수정
+              </md-elevated-button>
+            </h3>
+            <div content-1>
+              <img
+                ?no-image=${!((_c = this.project.mainPhoto) === null || _c === void 0 ? void 0 : _c.fullpath)}
+                src=${((_d = this.project.mainPhoto) === null || _d === void 0 ? void 0 : _d.fullpath) || '/assets/images/no-image.png'}
+              />
+
+              <div>
+                <div row>
+                  <span>- 면적 : </span>
+                  <span>${(_f = (_e = this.project.buildingComplex) === null || _e === void 0 ? void 0 : _e.area) === null || _f === void 0 ? void 0 : _f.toLocaleString()} ㎡</span>
+                </div>
+                <div row>
+                  <span>- 착공~준공 : </span>
+                  <span bold>${this.project.startDate}~${this.project.endDate}</span>
+                </div>
+                <div row>
+                  <span>- 발주처 : </span>
+                  <span>${(_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.clientCompany}</span>
+                </div>
+                <div row>
+                  <span>- 건설사 : </span>
+                  <span>${(_h = this.project.buildingComplex) === null || _h === void 0 ? void 0 : _h.constructionCompany}</span>
+                </div>
+                <div row>
+                  <span>- 감리사 : </span>
+                  <span>${(_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.supervisoryCompany}</span>
+                </div>
+                <div row>
+                  <span>- 설계사 : </span>
+                  <span>${(_k = this.project.buildingComplex) === null || _k === void 0 ? void 0 : _k.designCompany}</span>
+                </div>
+              </div>
+            </div>
+
+            <div content-2>
+              <div row>
+                <span>- 건설구분 : </span>
+                <span>${(_l = this.project.buildingComplex) === null || _l === void 0 ? void 0 : _l.constructionType}</span>
+              </div>
+              <div row>
+                <span>- 공사금액 : </span>
+                <span>${(_o = (_m = this.project.buildingComplex) === null || _m === void 0 ? void 0 : _m.constructionCost) === null || _o === void 0 ? void 0 : _o.toLocaleString()} 억원</span>
+              </div>
+              <div row>
+                <span>- 세대수 : </span>
+                <span>${(_q = (_p = this.project.buildingComplex) === null || _p === void 0 ? void 0 : _p.householdCount) === null || _q === void 0 ? void 0 : _q.toLocaleString()}</span>
+              </div>
+              <div row>
+                <span>- 기타 : </span>
+                <span>${(_r = this.project.buildingComplex) === null || _r === void 0 ? void 0 : _r.etc}</span>
+              </div>
+            </div>
+          </div>
+
+          <div left-bottom>
+            <h3>
+              조감도(BIM도면)
+              <md-elevated-button
+                target="_blank"
+                href=${((_s = this.project.buildingComplex) === null || _s === void 0 ? void 0 : _s.virtualTourLink) || ''}
+                ?disabled=${!((_t = this.project.buildingComplex) === null || _t === void 0 ? void 0 : _t.virtualTourLink)}
+              >
+                <md-icon slot="icon">smart_toy</md-icon>Virtual Tour
+              </md-elevated-button>
+            </h3>
+            ${((_v = (_u = this.project.buildingComplex) === null || _u === void 0 ? void 0 : _u.drawing) === null || _v === void 0 ? void 0 : _v.fullpath)
+            ? html `<div building-complex-img></div>`
+            : html `<img building-complex-img src="/assets/images/img-building-complex-default.jpg" />`}
+          </div>
+        </div>
+
+        <div>
+          <div right-top>
+            <h3>프로젝트 현황</h3>
+
+            <div kpi-header>
+              <span kpi-datetime
+                >${new Date().toLocaleDateString('ko-KR')}
+                ${new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', hour12: false })}</span
+              >
+            </div>
+            <div state>
+              <div kpi-container>
+                <div kpi-info-item kpi>
+                  <ox-progress-circle
+                    .value=${this.project.kpi || 0}
+                    fontColor="transparent"
+                    borderStyle="none"
+                    innerCircleSize="30%"
+                    circleColor="#E15757"
+                    background="#f6f6f6"
+                    size="120px"
+                  ></ox-progress-circle>
+
+                  <div kpi-info-label>
+                    <span kpi-info-label>KPI 지수</span>
+                    <span kpi-info-value bold>${this.project.kpi || 0}%</span>
+                  </div>
+                </div>
+                <div kpi-info-item>
+                  <span kpi-info-label>검측 통과율</span>
+                  <span kpi-info-value>
+                    <span bold>${((_w = this.inspectionSummary.pass) === null || _w === void 0 ? void 0 : _w.toLocaleString()) || 0}</span>
+                    <span small> / ${(totalInspectionCount === null || totalInspectionCount === void 0 ? void 0 : totalInspectionCount.toLocaleString()) || 0}</span>
+                  </span>
+                </div>
+                <div kpi-info-item>
+                  <span kpi-info-label>작업 중 로봇</span>
+                  <span kpi-info-value>
+                    <span bold>${((_x = this.project.robotCount) === null || _x === void 0 ? void 0 : _x.toLocaleString()) || 0}</span>
+                    <span small> 대</span>
+                  </span>
+                </div>
+                <div kpi-info-item weather>
+                  <div>
+                    <span><md-icon slot="icon">rainy</md-icon>강수확률</span>
+                    <span bold>${this.weather.rain}%</span>
+                  </div>
+                  <div>
+                    <span><md-icon slot="icon">humidity_percentage</md-icon> 습도</span>
+                    <span bold>${this.weather.humidity}%</span>
+                  </div>
+                  <div>
+                    <span><md-icon slot="icon">thermostat</md-icon> 온도</span>
+                    <span bold>${this.weather.temperature}°C</span>
+                  </div>
+
+                  <!--
+                      <div>
+                        <span><md-icon slot="icon">arrows_output</md-icon> 풍향</span>
+                        <span bold>${this.weather.windDirection}</span>
+                      </div>
+                      <div>
+                        <span><md-icon slot="icon">air</md-icon> 풍속</span>
+                        <span bold>${this.weather.windSpeed} m/s</span>
+                      </div>
+                      -->
+                </div>
+              </div>
+
+              <div progress-container>
+                <span progress>
+                  <ox-progress-circle
+                    .value=${this.project.totalProgress}
+                    titleText="전체"
+                    suffix="%"
+                    fontSize="27px"
+                    fontColor="#4E5055"
+                    borderStyle="none"
+                    innerCircleSize="28%"
+                    circleColor="#0595E5"
+                    shadow="#00000026 4px 4px 4px"
+                    background="#eaf5fd"
+                  ></ox-progress-circle>
+                  <div>전체공정율(%)</div>
+                </span>
+                <span progress>
+                  <ox-progress-circle
+                    .value=${this.project.weeklyProgress}
+                    titleText="주간"
+                    suffix="%"
+                    fontSize="27px"
+                    fontColor="#4E5055"
+                    borderStyle="none"
+                    innerCircleSize="28%"
+                    circleColor="#06B5AF"
+                    shadow="#00000026 4px 4px 4px"
+                    background="#eaf7f7"
+                  ></ox-progress-circle>
+                  <div week>주간공정율(%)</div>
+                </span>
+
+                <span progress>
+                  <ox-progress-circle
+                    .value=${this.project.inspPassRate}
+                    titleText="검측 통과"
+                    suffix="%"
+                    fontSize="27px"
+                    fontColor="#4E5055"
+                    borderStyle="none"
+                    innerCircleSize="28%"
+                    circleColor="#1BB401"
+                    shadow="#00000026 4px 4px 4px"
+                    background="#e8f7e5"
+                  ></ox-progress-circle>
+                  <div insp-pass-rate>통과 비율(%)</div>
+                </span>
+                <span progress>
+                  <ox-progress-circle
+                    .value=${this.project.robotProgressRate}
+                    titleText="로봇작업"
+                    suffix="%"
+                    fontSize="27px"
+                    fontColor="#4E5055"
+                    borderStyle="none"
+                    innerCircleSize="28%"
+                    circleColor="#8957D8"
+                    shadow="#00000026 4px 4px 4px"
+                    background="#f3eefb"
+                  ></ox-progress-circle>
+                  <div robot-progress-rate>진행률(%)</div>
+                </span>
+              </div>
+            </div>
+            <div notice>
+              <div name bold>공지사항</div>
+              <div content>${this.project.buildingComplex.notice}</div>
+            </div>
+
+            <div inspection>
+              <span name bold>
+                <md-icon slot="icon">list_alt_add</md-icon>
+                작업 현황
+              </span>
+              <span ?active=${this.statusFilter === 'WAIT'} @click=${() => this._onClickStatusFilter('WAIT')}>
+                <div>작업 완료</div>
+                <div bold wait>${(this.inspectionSummary.wait || 0) - (this.inspectionSummary.reWait || 0)}</div>
+              </span>
+              <span ?active=${this.statusFilter === 'REQUEST'} @click=${() => this._onClickStatusFilter('REQUEST')}>
+                <div>감리 대기</div>
+                <div bold request>${this.inspectionSummary.request}</div>
+              </span>
+              <span ?active=${this.statusFilter === 'FAIL'} @click=${() => this._onClickStatusFilter('FAIL')}>
+                <div>조치 필요</div>
+                <div bold fail>${this.inspectionSummary.fail}</div>
+              </span>
+              <span ?active=${this.statusFilter === 'RE_WAIT'} @click=${() => this._onClickStatusFilter('RE_WAIT')}>
+                <div>재검측 대기</div>
+                <div bold re-wait>${this.inspectionSummary.reWait || 0}</div>
+              </span>
+              <span ?active=${this.statusFilter === 'PASS'} @click=${() => this._onClickStatusFilter('PASS')}>
+                <div>검측 완료</div>
+                <div bold pass>${this.inspectionSummary.pass}</div>
+              </span>
+            </div>
+          </div>
+
+          <div right-bottom>
+            <h3>검측 현황${this.statusFilter ? ` (${this._getStatusFilterLabel()} 목록)` : ''}</h3>
+            <div table-container>
+              <hr />
+              <table>
+                <thead>
+                  <tr>
+                    <th width="3%"></th>
+                    <th width="10%">검측 위치</th>
+                    <th width="10%">공종</th>
+                    <th width="22%">내용</th>
+                    <th width="15%">검측 요청일</th>
+                    <th width="10%">작업 상태</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  ${this.buildingInspections.map((inspection, idx) => {
+            var _a, _b, _c, _d, _e, _f;
+            return html ` <tr @click=${() => this._onClickInspection(inspection)}>
+                      <td>${idx + 1}</td>
+                      <td>${(_b = (_a = inspection === null || inspection === void 0 ? void 0 : inspection.buildingLevel) === null || _a === void 0 ? void 0 : _a.building) === null || _b === void 0 ? void 0 : _b.name} ${(_c = inspection === null || inspection === void 0 ? void 0 : inspection.buildingLevel) === null || _c === void 0 ? void 0 : _c.floorDisplayName}층</td>
+                      <td bold>${(_d = inspection.checklist) === null || _d === void 0 ? void 0 : _d.constructionType}</td>
+                      <td>${((_f = (_e = inspection.checklist) === null || _e === void 0 ? void 0 : _e.inspectionParts) === null || _f === void 0 ? void 0 : _f.join(', ')) || ''}</td>
+                      <td>${this._formatDate(inspection.requestDate)}</td>
+                      <td bold status=${inspection.status || ''}>
+                        ${inspection.status &&
+                ((inspection.failCount || 0) > 0 ? BUILDING_INSPECTION_RE_STATUS : BUILDING_INSPECTION_STATUS)[inspection.status]}
+                      </td>
+                    </tr>`;
+        })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    async pageInitialized(lifecycle) { }
+    async pageUpdated(changes, lifecycle) {
+        var _a, _b;
+        if (this.active) {
+            this.projectId = lifecycle.resourceId || '';
+            // resourceId 없이 진입한 경우 (프로젝트 테넌트 → / 접속)
+            if (!this.projectId) {
+                const res = await client.query({
+                    query: gql `
+            query {
+              currentProject {
+                id
+              }
+            }
+          `
+                });
+                const projectId = (_b = (_a = res.data) === null || _a === void 0 ? void 0 : _a.currentProject) === null || _b === void 0 ? void 0 : _b.id;
+                if (projectId) {
+                    navigate(`project-detail/${projectId}`);
+                    return;
+                }
+            }
+            await Promise.all([this.initProject(lifecycle.resourceId), this._fetchProjectType()]);
+        }
+    }
+    async _fetchProjectType() {
+        var _a;
+        const response = await client.query({
+            query: gql `
+        query {
+          currentProjectType
+        }
+      `
+        });
+        this.configProjectType = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.currentProjectType) || '';
+    }
+    async initProject(projectId = '') {
+        var _a, _b, _c, _d, _e;
+        const response = await client.query({
+            query: gql `
+        query Project($id: String!, $projectId: String!, $params: BuildingInspectionsOfProject!) {
+          project(id: $id) {
+            id
+            name
+            startDate
+            endDate
+            projectType
+            mainPhoto {
+              fullpath
+            }
+            totalProgress
+            weeklyProgress
+            kpi
+            inspPassRate
+            robotProgressRate
+            structuralSafetyRate
+            robotCount
+            buildingComplex {
+              id
+              address
+              latitude
+              longitude
+              area
+              clientCompany
+              constructionCompany
+              supervisoryCompany
+              designCompany
+              drawing {
+                id
+                name
+                fullpath
+              }
+              constructionType
+              constructionCost
+              etc
+              notice
+              householdCount
+              buildingCount
+              virtualTourLink
+              buildings {
+                id
+                name
+                floorCount
+              }
+            }
+          }
+
+          inspectionSummary: buildingInspectionSummaryOfProject(projectId: $projectId) {
+            wait
+            request
+            pass
+            fail
+            reWait
+          }
+
+          buildingInspectionsOfProject(params: $params) {
+            items {
+              id
+              status
+              failCount
+              requestDate
+              buildingLevel {
+                id
+                floor
+                floorDisplayName
+                building {
+                  id
+                  name
+                }
+              }
+              checklist {
+                name
+                constructionType
+                constructionDetailType
+                inspectionParts
+              }
+            }
+            total
+          }
+        }
+      `,
+            variables: {
+                id: projectId,
+                projectId,
+                params: Object.assign({ projectId, limit: 10 }, (this.statusFilter ? { statusFilter: this.statusFilter } : {}))
+            }
+        });
+        if (response.errors)
+            return;
+        this.project = ((_a = response.data) === null || _a === void 0 ? void 0 : _a.project) || {};
+        this.inspectionSummary = ((_b = response.data) === null || _b === void 0 ? void 0 : _b.inspectionSummary) || {};
+        this.buildingInspections = ((_d = (_c = response.data) === null || _c === void 0 ? void 0 : _c.buildingInspectionsOfProject) === null || _d === void 0 ? void 0 : _d.items) || [];
+        this.updateContext();
+        const { latitude, longitude } = (_e = this.project) === null || _e === void 0 ? void 0 : _e.buildingComplex;
+        if (latitude && longitude) {
+            this.weather = await _getWeather(latitude, longitude);
+        }
+    }
+    async _onClickStatusFilter(filter) {
+        // 같은 필터 클릭 시 해제
+        this.statusFilter = this.statusFilter === filter ? '' : filter;
+        await this.initProject(this.projectId);
+    }
+    _getStatusFilterLabel() {
+        const labels = {
+            WAIT: '작업 완료',
+            REQUEST: '감리 대기',
+            FAIL: '조치 필요',
+            RE_WAIT: '재검측 대기',
+            PASS: '검측 완료'
+        };
+        return labels[this.statusFilter] || '';
+    }
+    _onClickInspection(buildingInspection) {
+        var _a, _b, _c;
+        console.log('buildingInspection :', buildingInspection);
+        if (this.project.projectType === ProjectType.DSSP) {
+            navigate(`building-inspection-grid-detail/${this.project.id}?buildingId=${(_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.id}&levelId=${(_c = buildingInspection === null || buildingInspection === void 0 ? void 0 : buildingInspection.buildingLevel) === null || _c === void 0 ? void 0 : _c.id}`);
+        }
+        else if (this.project.projectType === ProjectType.DCSP) {
+            navigate(`building-inspection-detail-drawing/${buildingInspection.id}`);
+        }
+    }
+    _formatDate(date) {
+        if (!date)
+            return '';
+        try {
+            const parsed = typeof date === 'string' && /^\d+$/.test(date) ? new Date(Number(date)) : new Date(date);
+            return new Intl.DateTimeFormat('en-CA', {
+                timeZone: 'Asia/Seoul',
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit'
+            }).format(parsed);
+        }
+        catch (_a) {
+            return String(date).split('T')[0] || '';
+        }
+    }
+};
+ProjectDetail.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: grid;
+        grid-template-rows: 55px auto;
+        color: #4e5055;
+
+        width: 100%;
+        background-color: var(--md-sys-color-background, #f6f6f6);
+        overflow-y: auto;
+
+        --grid-record-emphasized-background-color: red;
+        --grid-record-emphasized-color: yellow;
+      }
+
+      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[button-container] {
+          display: flex;
+          align-items: center;
+          justify-content: end;
+          flex: 0.5;
+
+          md-elevated-button {
+            margin: 0 var(--spacing-small, 4px);
+
+            --md-elevated-button-container-height: 32px;
+            --md-elevated-button-label-text-size: 16px;
+            --md-elevated-button-container-color: #0595e5;
+
+            --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+          }
+        }
+      }
+
+      div[body] {
+        display: flex;
+        margin: var(--spacing-large, 12px);
+        margin-top: 0;
+        gap: var(--spacing-medium, 8px);
+
+        h3 {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          color: #2e79be;
+          font-size: 16px;
+          margin: 0px;
+
+          a {
+            text-decoration: none;
+            color: #2e79be;
+          }
+
+          md-elevated-button {
+            --md-elevated-button-container-height: 28px;
+            --md-elevated-button-label-text-size: 13px;
+            --md-elevated-button-container-color: #0595e5;
+            --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+            --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+          }
+        }
+
+        & > div {
+          display: flex;
+          flex: 1;
+          gap: var(--spacing-medium, 8px);
+          flex-direction: column;
+
+          & > div {
+            display: flex;
+            flex-direction: column;
+            background-color: var(--md-sys-color-on-primary);
+            border: 1px solid #cccccc80;
+            gap: var(--spacing-medium, 8px);
+            padding: var(--spacing-large, 12px);
+            border-radius: 5px;
+          }
+
+          div[left-top] {
+            div[content-1] {
+              display: flex;
+              align-items: center;
+              gap: var(--spacing-medium, 8px);
+              font-size: 14px;
+
+              img {
+                width: 42%;
+                height: auto;
+                aspect-ratio: 1920 / 1080;
+                border: 1px solid #cccccc80;
+              }
+              img[no-image] {
+                object-fit: contain;
+                opacity: 0.5;
+              }
+            }
+            div[content-2] {
+              height: 65px;
+              overflow-y: auto;
+              font-size: 14px;
+            }
+          }
+
+          div[left-bottom] {
+            flex: 1;
+
+            display: flex;
+            flex-direction: column;
+
+            [building-complex-img] {
+              width: 100%;
+              flex: 1;
+              aspect-ratio: 2 / 1;
+            }
+
+            img {
+              opacity: 0.5;
+            }
+          }
+
+          div[right-top] {
+            div[state] {
+              display: flex;
+              flex-direction: column;
+              gap: var(--spacing-large, 12px);
+
+              div[progress-container] {
+                display: flex;
+                justify-content: space-around;
+                gap: 8px;
+
+                span[progress] {
+                  max-width: 165px;
+                  text-align: center;
+                  display: flex;
+                  justify-self: center;
+                  flex-direction: column;
+                  width: 100%;
+                  margin-inline: 12px;
+
+                  & > div {
+                    font-weight: bold;
+                    color: #2e79be;
+                    font-size: 16px;
+                    margin-top: 9px;
+                  }
+                  & > div[week] {
+                    color: #06b5af;
+                  }
+                  & > div[insp-pass-rate] {
+                    color: #1bb401;
+                  }
+                  & > div[robot-progress-rate] {
+                    color: #8957d8;
+                  }
+                }
+              }
+
+              div[weather] {
+                display: flex;
+                flex-direction: column;
+                gap: var(--spacing-small, 4px);
+                margin-left: var(--spacing-medium, 8px);
+                font-size: 14px;
+
+                & > div {
+                  display: flex;
+                  justify-content: space-between;
+                  --md-icon-size: 18px;
+                  margin-right: var(--spacing-small, 4px);
+
+                  & > span {
+                    display: flex;
+                    align-items: center;
+                    gap: var(--spacing-tiny, 2px);
+                  }
+                }
+              }
+            }
+            div[inspection] {
+              display: grid;
+              grid-template-columns: 1.4fr 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr;
+              margin-top: 10px;
+              background: #f6f6f6;
+              border-radius: 7px;
+              padding: var(--spacing-small, 4px) 0px;
+
+              & > span {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                border-radius: 5px;
+                padding: 4px 0;
+
+                &:not([name]) {
+                  cursor: pointer;
+                }
+                &:not([name]):hover {
+                  background: #e8e8e8;
+                }
+                &[active] {
+                  background: #dceefb;
+                }
+
+                div[wait] {
+                  color: #4e5055;
+                }
+                div[request] {
+                  color: #2e79be;
+                }
+                div[pass] {
+                  color: #1bb401;
+                }
+                div[fail] {
+                  color: #ff4444;
+                }
+                div[re-wait] {
+                  color: #e89c0e;
+                }
+              }
+              & > span[name] {
+                flex-direction: row;
+                text-align: right;
+                gap: var(--spacing-medium, 8px);
+                line-height: 1.3;
+
+                md-icon {
+                  width: 40px;
+                  height: 40px;
+                  border-radius: 7px;
+                  color: #fff;
+                  background: #f16154;
+                }
+              }
+            }
+            div[kpi-container] {
+              display: flex;
+              gap: 8px;
+              margin-bottom: 8px;
+              align-items: center;
+
+              div[kpi-header] {
+                grid-column: 1 / -1;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: var(--spacing-small, 4px);
+
+                span[kpi-title] {
+                  font-weight: bold;
+                  font-size: 16px;
+                  color: #2e79be;
+                }
+
+                span[kpi-datetime] {
+                  font-size: 12px;
+                  color: #666;
+                }
+              }
+
+              div[kpi-info-item] {
+                display: flex;
+                flex: 1;
+                flex-direction: column;
+                align-items: center;
+                padding: 5px;
+                background: #f6f6f6;
+                border-radius: 4px;
+                min-height: 50px;
+                justify-content: center;
+                margin-inline: 12px;
+                border-radius: 7px;
+
+                span[kpi-info-label] {
+                  font-size: 16px;
+                  color: #4e5055;
+                  margin-bottom: 2px;
+                }
+
+                span[kpi-info-value] {
+                  font-size: 18px;
+
+                  & > span[small] {
+                    font-size: 17px;
+                  }
+                }
+
+                &[weather] {
+                  background: none;
+                  align-items: flex-start;
+
+                  & > div {
+                    width: 100%;
+                  }
+                }
+
+                &[kpi] {
+                  flex-direction: row;
+                  justify-content: space-around;
+
+                  div[kpi-info-label] {
+                    display: flex;
+                    flex-direction: column;
+                  }
+
+                  ox-progress-circle {
+                    width: 45px;
+                  }
+                }
+              }
+            }
+            div[notice] {
+              margin-top: var(--spacing-medium, 8px);
+
+              div[name] {
+                margin-left: 4px;
+              }
+              div[content] {
+                background-color: #ebc8321a;
+                border-radius: 10px;
+                padding: var(--spacing-medium, 8px);
+                font-size: 14px;
+                margin-top: var(--spacing-small, 4px);
+              }
+            }
+          }
+
+          div[right-bottom] {
+            flex: 1;
+
+            display: flex;
+            flex-direction: column;
+
+            div[table-container] {
+              flex: 1;
+
+              overflow-y: auto;
+              overflow-x: hidden;
+              position: relative;
+            }
+
+            hr {
+              position: sticky;
+              margin: 0;
+              top: 0px;
+              border: 1px solid #3295f1;
+            }
+
+            table {
+              width: 100%;
+              border-collapse: collapse;
+              table-layout: fixed;
+            }
+
+            thead {
+              position: sticky;
+              top: var(--spacing-tiny, 2px);
+              background-color: #464651;
+              color: var(--md-sys-color-on-primary);
+              z-index: 1;
+            }
+
+            thead th {
+              padding: var(--spacing-tiny, 2px) var(--spacing-small, 4px);
+              font-size: 15px;
+              text-wrap: pretty;
+            }
+
+            tbody td {
+              border-bottom: 1px solid rgba(51, 51, 51, 0.2);
+              padding: var(--spacing-small, 4px);
+              text-align: center;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              font-size: 13px;
+            }
+
+            tbody td[status='FAIL'] {
+              color: #e15757;
+            }
+
+            md-elevated-button {
+              margin: 0 var(--spacing-small, 4px);
+
+              --md-elevated-button-container-height: 32px;
+              --md-elevated-button-label-text-size: 16px;
+              --md-elevated-button-container-color: #0595e5;
+
+              --md-elevated-button-label-text-color: var(--md-sys-color-on-primary);
+              --md-elevated-button-hover-label-text-color: var(--md-sys-color-on-primary);
+              --md-elevated-button-pressed-label-text-color: var(--md-sys-color-on-primary);
+              --md-elevated-button-focus-label-text-color: var(--md-sys-color-on-primary);
+              --md-elevated-button-icon-color: var(--md-sys-color-on-primary);
+              --md-elevated-button-hover-icon-color: var(--md-sys-color-on-primary);
+              --md-elevated-button-pressed-icon-color: var(--md-sys-color-on-primary);
+              --md-elevated-button-focus-icon-color: var(--md-sys-color-on-primary);
+
+              &[red] {
+                --md-elevated-button-container-color: #e15757;
+              }
+            }
+          }
+        }
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectDetail.prototype, "projectId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectDetail.prototype, "project", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], ProjectDetail.prototype, "buildingInspections", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectDetail.prototype, "inspectionSummary", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectDetail.prototype, "statusFilter", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], ProjectDetail.prototype, "configProjectType", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], ProjectDetail.prototype, "weather", void 0);
+ProjectDetail = __decorate([
+    customElement('project-detail')
+], ProjectDetail);
+export { ProjectDetail };
+//# sourceMappingURL=project-detail.js.map