@dssp/project 1.0.0-alpha.1 → 1.0.0-alpha.101

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

@@ -10,9 +10,10 @@ 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 } from './project-list';
+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);
@@ -36,52 +37,93 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             wait: 0,
             request: 0,
             pass: 0,
-            fail: 0
+            fail: 0,
+            reWait: 0
         };
+        this.statusFilter = '';
+        this.configProjectType = '';
         this.weather = {
             rain: 0,
             temperature: 0,
             humidity: 0,
-            wind: ''
+            windDirection: '',
+            windSpeed: 0
         };
     }
     get context() {
+        var _a;
         return {
-            title: '진행 중 프로젝트 상세 정보'
+            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;
+        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>${this.project.name}</h2>
+        <h2>
+          <md-icon slot="icon" back @click=${() => history.back()}>arrow_back</md-icon>
+          ${this.project.name}
+        </h2>
         <div button-container>
-          <md-elevated-button href=${`project-update/${this.project.id}`}>
-            <md-icon slot="icon">assignment</md-icon>프로젝트 정보 수정
-          </md-elevated-button>
-          <md-elevated-button href=${`project-plan-management/${this.project.id}`}>
-            <md-icon slot="icon">description</md-icon>도면 관리
-          </md-elevated-button>
-          <md-elevated-button href=${`project-schedule/${this.project.id}`}>
-            <md-icon slot="icon">event_note</md-icon>공정표 관리
-          </md-elevated-button>
+          ${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>기본 정보</h3>
+            <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=${!((_a = this.project.mainPhoto) === null || _a === void 0 ? void 0 : _a.fullpath)}
-                src=${((_b = this.project.mainPhoto) === null || _b === void 0 ? void 0 : _b.fullpath) || '/assets/images/no-image.png'}
+                ?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>${(_d = (_c = this.project.buildingComplex) === null || _c === void 0 ? void 0 : _c.area) === null || _d === void 0 ? void 0 : _d.toLocaleString()} ㎡</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>
@@ -89,19 +131,19 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                 </div>
                 <div row>
                   <span>- 발주처 : </span>
-                  <span>${(_e = this.project.buildingComplex) === null || _e === void 0 ? void 0 : _e.clientCompany}</span>
+                  <span>${(_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.clientCompany}</span>
                 </div>
                 <div row>
                   <span>- 건설사 : </span>
-                  <span>${(_f = this.project.buildingComplex) === null || _f === void 0 ? void 0 : _f.constructionCompany}</span>
+                  <span>${(_h = this.project.buildingComplex) === null || _h === void 0 ? void 0 : _h.constructionCompany}</span>
                 </div>
                 <div row>
                   <span>- 감리사 : </span>
-                  <span>${(_g = this.project.buildingComplex) === null || _g === void 0 ? void 0 : _g.supervisoryCompany}</span>
+                  <span>${(_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.supervisoryCompany}</span>
                 </div>
                 <div row>
                   <span>- 설계사 : </span>
-                  <span>${(_h = this.project.buildingComplex) === null || _h === void 0 ? void 0 : _h.designCompany}</span>
+                  <span>${(_k = this.project.buildingComplex) === null || _k === void 0 ? void 0 : _k.designCompany}</span>
                 </div>
               </div>
             </div>
@@ -109,125 +151,208 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             <div content-2>
               <div row>
                 <span>- 건설구분 : </span>
-                <span>${(_j = this.project.buildingComplex) === null || _j === void 0 ? void 0 : _j.constructionType}</span>
+                <span>${(_l = this.project.buildingComplex) === null || _l === void 0 ? void 0 : _l.constructionType}</span>
               </div>
               <div row>
                 <span>- 공사금액 : </span>
-                <span>${(_l = (_k = this.project.buildingComplex) === null || _k === void 0 ? void 0 : _k.constructionCost) === null || _l === void 0 ? void 0 : _l.toLocaleString()} 원</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>${(_o = (_m = this.project.buildingComplex) === null || _m === void 0 ? void 0 : _m.householdCount) === null || _o === void 0 ? void 0 : _o.toLocaleString()}</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>${(_p = this.project.buildingComplex) === null || _p === void 0 ? void 0 : _p.etc}</span>
+                <span>${(_r = this.project.buildingComplex) === null || _r === void 0 ? void 0 : _r.etc}</span>
               </div>
             </div>
           </div>
 
           <div left-bottom>
-            <h3>조감도(BIM도면)</h3>
-            ${((_r = (_q = this.project.buildingComplex) === null || _q === void 0 ? void 0 : _q.drawing) === null || _r === void 0 ? void 0 : _r.fullpath)
+            <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 subject bold>개별 단지 상세정보 바로가기</div>
-              <div building-container>
-                ${(_t = (_s = this.project.buildingComplex) === null || _s === void 0 ? void 0 : _s.buildings) === null || _t === void 0 ? void 0 : _t.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>
-              <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 weather>
-                <div bold>현장현황</div>
-                <div>
-                  <span><md-icon slot="icon">rainy</md-icon>강수확률</span>
-                  <span bold>${this.weather.rain}%</span>
+              <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>
-                  <span><md-icon slot="icon">humidity_percentage</md-icon> 습도</span>
-                  <span bold>${this.weather.humidity}%</span>
+                <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>
-                  <span><md-icon slot="icon">thermostat</md-icon> 온도</span>
-                  <span bold>${this.weather.temperature}°C</span>
+                <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>
-                  <span><md-icon slot="icon">air</md-icon> 풍향</span>
-                  <span bold>${this.weather.wind}</span>
+                <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>
-              </span>
+              </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>
-                시공검측<br />현황
-              </span>
-              <span>
-                <div>검측요청</div>
-                <div bold>${this.inspectionSummary.wait}</div>
+                작업 현황
               </span>
-              <span>
-                <div>검측대기</div>
-                <div bold>${this.inspectionSummary.request}</div>
+              <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>
-                <div>합격</div>
-                <div bold pass>${this.inspectionSummary.pass}</div>
+              <span ?active=${this.statusFilter === 'REQUEST'} @click=${() => this._onClickStatusFilter('REQUEST')}>
+                <div>감리 대기</div>
+                <div bold request>${this.inspectionSummary.request}</div>
               </span>
-              <span>
-                <div>불합격</div>
+              <span ?active=${this.statusFilter === 'FAIL'} @click=${() => this._onClickStatusFilter('FAIL')}>
+                <div>조치 필요</div>
                 <div bold fail>${this.inspectionSummary.fail}</div>
               </span>
-            </div>
-            <div notice>
-              <div name bold>공지사항</div>
-              <div content>${this.project.buildingComplex.notice}</div>
+              <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>검측 현황</h3>
+            <h3>검측 현황${this.statusFilter ? ` (${this._getStatusFilterLabel()} 목록)` : ''}</h3>
             <div table-container>
               <hr />
               <table>
@@ -238,19 +363,22 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                     <th width="10%">공종</th>
                     <th width="22%">내용</th>
                     <th width="15%">검측 요청일</th>
-                    <th width="10%">검측 결과</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.id || '')}>
+            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.floor}층</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>${inspection.status && BUILDING_INSPECTION_STATUS[inspection.status]}</td>
+                      <td bold status=${inspection.status || ''}>
+                        ${inspection.status &&
+                ((inspection.failCount || 0) > 0 ? BUILDING_INSPECTION_RE_STATUS : BUILDING_INSPECTION_STATUS)[inspection.status]}
+                      </td>
                     </tr>`;
         })}
                 </tbody>
@@ -263,10 +391,39 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
     }
     async pageInitialized(lifecycle) { }
     async pageUpdated(changes, lifecycle) {
+        var _a, _b;
         if (this.active) {
             this.projectId = lifecycle.resourceId || '';
-            await this.initProject(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;
@@ -278,6 +435,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             name
             startDate
             endDate
+            projectType
             mainPhoto {
               fullpath
             }
@@ -287,6 +445,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             inspPassRate
             robotProgressRate
             structuralSafetyRate
+            robotCount
             buildingComplex {
               id
               address
@@ -308,6 +467,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
               notice
               householdCount
               buildingCount
+              virtualTourLink
               buildings {
                 id
                 name
@@ -321,16 +481,21 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             request
             pass
             fail
+            reWait
           }
 
           buildingInspectionsOfProject(params: $params) {
             items {
               id
               status
+              failCount
               requestDate
               buildingLevel {
+                id
                 floor
+                floorDisplayName
                 building {
+                  id
                   name
                 }
               }
@@ -348,10 +513,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             variables: {
                 id: projectId,
                 projectId,
-                params: {
-                    projectId,
-                    limit: 10
-                }
+                params: Object.assign({ projectId, limit: 10 }, (this.statusFilter ? { statusFilter: this.statusFilter } : {}))
             }
         });
         if (response.errors)
@@ -359,23 +521,52 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
         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);
         }
     }
-    _onClickInspection(buildingInspectionId) {
-        navigate(`building-inspection-detail-drawing/${buildingInspectionId}`);
+    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) {
-        return date
-            ? new Intl.DateTimeFormat('en-CA', {
+        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(new Date(date))
-            : '';
+            }).format(parsed);
+        }
+        catch (_a) {
+            return String(date).split('T')[0] || '';
+        }
     }
 };
 ProjectDetail.styles = [
@@ -398,7 +589,7 @@ ProjectDetail.styles = [
         --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,.20);
+        --md-sys-color-outline: rgba(51, 51, 51, 0.2);
       }
 
       *[bold] {
@@ -410,9 +601,28 @@ ProjectDetail.styles = [
         margin: 0px var(--spacing-large, 12px);
 
         h2 {
+          display: flex;
+          gap: 7px;
           flex: 0.5;
           color: #3f71a0;
-          font-size:18px;
+          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] {
@@ -443,10 +653,13 @@ ProjectDetail.styles = [
       div[body] {
         display: flex;
         margin: var(--spacing-large, 12px);
-        margin-top:0;
+        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;
@@ -455,6 +668,20 @@ ProjectDetail.styles = [
             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 {
@@ -513,57 +740,52 @@ ProjectDetail.styles = [
             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,.20);
-              }
-            }
           }
 
           div[right-top] {
             div[state] {
-              display: grid;
-              grid-template-columns: 0.95fr 0.95fr 1.1fr;
+              display: flex;
+              flex-direction: column;
               gap: var(--spacing-large, 12px);
 
-              span[progress] {
-                max-width: 150px;
-                text-align: center;
+              div[progress-container] {
                 display: flex;
-                justify-self: center;
-                flex-direction: column;
-                width: 100%;
+                justify-content: space-around;
+                gap: 8px;
 
-                & > div {
-                  font-weight: bold;
-                  color: #2e79be;
-                  font-size: 12px;
-                  margin-top: var(--spacing-small, 4px);
-                }
-                & > div[week] {
-                  color: #06b5af;
+                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;
+                  }
                 }
               }
-              span[weather] {
+
+              div[weather] {
                 display: flex;
                 flex-direction: column;
                 gap: var(--spacing-small, 4px);
                 margin-left: var(--spacing-medium, 8px);
-                font-size:14px;
+                font-size: 14px;
 
                 & > div {
                   display: flex;
@@ -573,16 +795,16 @@ ProjectDetail.styles = [
 
                   & > span {
                     display: flex;
-                    align-item:center;
-                    var(--spacing-tiny, 2px);
+                    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: var(--spacing-small, 4px);
+              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;
@@ -592,6 +814,18 @@ ProjectDetail.styles = [
                 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;
@@ -605,12 +839,15 @@ ProjectDetail.styles = [
                 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;
+                line-height: 1.3;
 
                 md-icon {
                   width: 40px;
@@ -621,6 +858,82 @@ ProjectDetail.styles = [
                 }
               }
             }
+            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);
 
@@ -679,7 +992,7 @@ ProjectDetail.styles = [
             }
 
             tbody td {
-              border-bottom: 1px solid rgba(51,51,51,.20);
+              border-bottom: 1px solid rgba(51, 51, 51, 0.2);
               padding: var(--spacing-small, 4px);
               text-align: center;
               white-space: nowrap;
@@ -688,6 +1001,10 @@ ProjectDetail.styles = [
               font-size: 13px;
             }
 
+            tbody td[status='FAIL'] {
+              color: #e15757;
+            }
+
             md-elevated-button {
               margin: 0 var(--spacing-small, 4px);
 
@@ -729,6 +1046,14 @@ __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)