@dssp/project 1.0.0-y.0 → 1.0.0

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

@@ -1,959 +0,0 @@
-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, ProjectType } from './project-list';
-import _getWeather from '../lib/waether';
-import '@operato/chart/ox-progress-circle.js';
-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
-        };
-        this.weather = {
-            rain: 0,
-            temperature: 0,
-            humidity: 0,
-            windDirection: '',
-            windSpeed: 0
-        };
-    }
-    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, _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>
-          <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>기본 정보</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도면)</h3>
-            ${((_t = (_s = this.project.buildingComplex) === null || _s === void 0 ? void 0 : _s.drawing) === null || _t === void 0 ? void 0 : _t.fullpath)
-            ? html `<div building-complex-img></div>`
-            : html `<img building-complex-img src="/assets/images/img-building-complex-default.jpg" />`}
-            <div>
-              <div subject bold>개별 단지 상세정보 바로가기</div>
-              <div building-container>
-                ${(_v = (_u = this.project.buildingComplex) === null || _u === void 0 ? void 0 : _u.buildings) === null || _v === void 0 ? void 0 : _v.map(building => {
-            return html `<md-outlined-button href=${`building-complex-detail/${this.project.id}?buildingId=${building.id}`}>
-                    ${building.name}
-                  </md-outlined-button>`;
-        })}
-              </div>
-            </div>
-          </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 inspection>
-              <span name bold>
-                <md-icon slot="icon">list_alt_add</md-icon>
-                시공검측<br />현황
-              </span>
-              <span>
-                <div>검측요청</div>
-                <div bold>${this.inspectionSummary.request}</div>
-              </span>
-              <span>
-                <div>검측대기</div>
-                <div bold>${this.inspectionSummary.wait}</div>
-              </span>
-              <span>
-                <div>합격</div>
-                <div bold pass>${this.inspectionSummary.pass}</div>
-              </span>
-              <span>
-                <div>불합격</div>
-                <div bold fail>${this.inspectionSummary.fail}</div>
-              </span>
-            </div>
-            <div notice>
-              <div name bold>공지사항</div>
-              <div content>${this.project.buildingComplex.notice}</div>
-            </div>
-          </div>
-
-          <div right-bottom>
-            <h3>검측 현황</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 && BUILDING_INSPECTION_STATUS[inspection.status]}
-                      </td>
-                    </tr>`;
-        })}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-    async pageInitialized(lifecycle) { }
-    async pageUpdated(changes, lifecycle) {
-        if (this.active) {
-            this.projectId = lifecycle.resourceId || '';
-            await this.initProject(lifecycle.resourceId);
-        }
-    }
-    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
-          }
-
-          buildingInspectionsOfProject(params: $params) {
-            items {
-              id
-              status
-              requestDate
-              buildingLevel {
-                id
-                floor
-                floorDisplayName
-                building {
-                  id
-                  name
-                }
-              }
-              checklist {
-                name
-                constructionType
-                constructionDetailType
-                inspectionParts
-              }
-            }
-            total
-          }
-        }
-      `,
-            variables: {
-                id: projectId,
-                projectId,
-                params: {
-                    projectId,
-                    limit: 10
-                }
-            }
-        });
-        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) || [];
-        const { latitude, longitude } = (_e = this.project) === null || _e === void 0 ? void 0 : _e.buildingComplex;
-        if (latitude && longitude) {
-            this.weather = await _getWeather(latitude, longitude);
-        }
-    }
-    _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) {
-        return date
-            ? new Intl.DateTimeFormat('en-CA', {
-                timeZone: 'Asia/Seoul',
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit'
-            }).format(new Date(date))
-            : '';
-    }
-};
-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 {
-          color: #2e79be;
-          font-size: 16px;
-          margin: 0px;
-
-          a {
-            text-decoration: none;
-            color: #2e79be;
-          }
-        }
-
-        & > 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[subject] {
-              margin-bottom: var(--spacing-small, 4px);
-            }
-
-            div[building-container] {
-              display: block;
-
-              & > * {
-                margin-right: var(--spacing-medium, 8px);
-                margin-bottom: var(--spacing-medium, 8px);
-              }
-              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);
-              }
-            }
-          }
-
-          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;
-              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;
-
-                div[wait] {
-                  color: #4e5055;
-                }
-                div[request] {
-                  color: #2e79be;
-                }
-                div[pass] {
-                  color: #1bb401;
-                }
-                div[fail] {
-                  color: #ff4444;
-                }
-              }
-              & > 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", Object)
-], ProjectDetail.prototype, "weather", void 0);
-ProjectDetail = __decorate([
-    customElement('project-detail')
-], ProjectDetail);
-export { ProjectDetail };
-//# sourceMappingURL=project-detail.js.map