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

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

@@ -10,7 +10,7 @@ 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 { BUILDING_INSPECTION_STATUS, BUILDING_INSPECTION_RE_STATUS, ProjectType } from './project-list';
 import _getWeather from '../lib/waether';
 import '@operato/chart/ox-progress-circle.js';
 let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
@@ -36,8 +36,11 @@ 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,
@@ -52,38 +55,71 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
         };
     }
     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>
@@ -91,19 +127,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>
@@ -111,45 +147,109 @@ 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>
+              <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
@@ -185,106 +285,70 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                 <span progress>
                   <ox-progress-circle
                     .value=${this.project.inspPassRate}
+                    titleText="검측 통과"
                     suffix="%"
                     fontSize="27px"
                     fontColor="#4E5055"
                     borderStyle="none"
                     innerCircleSize="28%"
-                    circleColor="#8B3F39"
+                    circleColor="#1BB401"
                     shadow="#00000026 4px 4px 4px"
-                    background="#DACCC7"
+                    background="#e8f7e5"
                   ></ox-progress-circle>
-                  <div insp-pass-rate>시공/구조 검측 통과 비율(%)</div>
+                  <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="#4A899B"
+                    circleColor="#8957D8"
                     shadow="#00000026 4px 4px 4px"
-                    background="#C7DFE1"
+                    background="#f3eefb"
                   ></ox-progress-circle>
-                  <div robot-progress-rate>로봇 작업 진행률(%)</div>
-                </span>
-              </div>
-
-              <div>
-                <div>KPI</div>
-
-                <div kpi-container>
-                  <div kpi-item>
-                    <span>KPI 지수</span>
-                    <span kpi-value kpi-index>${this.project.kpi || 0}%</span>
-                  </div>
-                  <div kpi-item>
-                    <span>검측 통과율</span>
-                    <span kpi-value pass-rate>${this.inspectionSummary.pass || 0} / ${totalInspectionCount || 0}</span>
-                  </div>
-                  <div kpi-item>
-                    <span>로봇 작업 대수</span>
-                    <span kpi-value robot-count>${this.project.robotCount || 0}</span>
-                  </div>
-                </div>
-
-                <span weather>
-                  <div bold>현장현황</div>
-                  <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 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 ?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>${this.inspectionSummary.request}</div>
+              <span ?active=${this.statusFilter === 'REQUEST'} @click=${() => this._onClickStatusFilter('REQUEST')}>
+                <div>감리 대기</div>
+                <div bold request>${this.inspectionSummary.request}</div>
               </span>
-              <span>
-                <div>합격</div>
-                <div bold pass>${this.inspectionSummary.pass}</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>
@@ -295,7 +359,7 @@ 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>
@@ -308,7 +372,8 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                       <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]}
+                        ${inspection.status &&
+                ((inspection.failCount || 0) > 0 ? BUILDING_INSPECTION_RE_STATUS : BUILDING_INSPECTION_STATUS)[inspection.status]}
                       </td>
                     </tr>`;
         })}
@@ -322,11 +387,40 @@ 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;
         const response = await client.query({
@@ -369,6 +463,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
               notice
               householdCount
               buildingCount
+              virtualTourLink
               buildings {
                 id
                 name
@@ -382,12 +477,14 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             request
             pass
             fail
+            reWait
           }
 
           buildingInspectionsOfProject(params: $params) {
             items {
               id
               status
+              failCount
               requestDate
               buildingLevel {
                 id
@@ -412,10 +509,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)
@@ -428,6 +522,21 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             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);
@@ -439,14 +548,20 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
         }
     }
     _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 = [
@@ -481,9 +596,28 @@ ProjectDetail.styles = [
         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] {
@@ -518,6 +652,9 @@ ProjectDetail.styles = [
         gap: var(--spacing-medium, 8px);
 
         h3 {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
           color: #2e79be;
           font-size: 16px;
           margin: 0px;
@@ -526,6 +663,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 {
@@ -584,65 +735,47 @@ 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, 0.2);
-              }
-            }
           }
 
           div[right-top] {
             div[state] {
-              display: grid;
-              grid-template-columns: 1.9fr 1.1fr;
+              display: flex;
+              flex-direction: column;
               gap: var(--spacing-large, 12px);
 
               div[progress-container] {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                row-gap: 15px;
+                display: flex;
+                justify-content: space-around;
+                gap: 8px;
 
                 span[progress] {
-                  max-width: 150px;
+                  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: 12px;
-                    margin-top: var(--spacing-small, 4px);
+                    font-size: 16px;
+                    margin-top: 9px;
                   }
                   & > div[week] {
                     color: #06b5af;
                   }
                   & > div[insp-pass-rate] {
-                    color: #8b3f39;
+                    color: #1bb401;
                   }
                   & > div[robot-progress-rate] {
-                    color: #4a899b;
+                    color: #8957d8;
                   }
                 }
               }
 
-              span[weather] {
+              div[weather] {
                 display: flex;
                 flex-direction: column;
                 gap: var(--spacing-small, 4px);
@@ -665,8 +798,8 @@ ProjectDetail.styles = [
             }
             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;
@@ -676,6 +809,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;
@@ -689,6 +834,9 @@ ProjectDetail.styles = [
                 div[fail] {
                   color: #ff4444;
                 }
+                div[re-wait] {
+                  color: #e89c0e;
+                }
               }
               & > span[name] {
                 flex-direction: row;
@@ -707,26 +855,77 @@ ProjectDetail.styles = [
             }
             div[kpi-container] {
               display: flex;
-              flex-direction: column;
-              gap: var(--spacing-small, 4px);
-              margin-bottom: var(--spacing-medium, 8px);
+              gap: 8px;
+              margin-bottom: 8px;
+              align-items: center;
 
-              div[kpi-item] {
+              div[kpi-header] {
+                grid-column: 1 / -1;
                 display: flex;
                 justify-content: space-between;
-                font-size: 14px;
+                align-items: center;
+                margin-bottom: var(--spacing-small, 4px);
 
-                span[kpi-value] {
+                span[kpi-title] {
                   font-weight: bold;
-                }
-                span[kpi-index] {
+                  font-size: 16px;
                   color: #2e79be;
                 }
-                span[pass-rate] {
-                  color: #1bb401;
+
+                span[kpi-datetime] {
+                  font-size: 12px;
+                  color: #666;
                 }
-                span[robot-count] {
-                  color: #4a899b;
+              }
+
+              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;
+                  }
                 }
               }
             }
@@ -842,6 +1041,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)