@dssp/project 1.0.0-alpha.5 → 1.0.0-alpha.51

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 } from './project-list';
+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) {
@@ -42,7 +42,8 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             rain: 0,
             temperature: 0,
             humidity: 0,
-            wind: ''
+            windDirection: '',
+            windSpeed: 0
         };
     }
     get context() {
@@ -51,18 +52,29 @@ 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
+            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-schedule/${this.project.id}`}>
+          <md-elevated-button href=${`project-task/${this.project.id}`}>
             <md-icon slot="icon">event_note</md-icon>공정표 관리
           </md-elevated-button>
         </div>
@@ -74,14 +86,14 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             <h3>기본 정보</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 +101,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,32 +121,32 @@ 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)
+            ${((_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>
-                ${(_t = (_s = this.project.buildingComplex) === null || _s === void 0 ? void 0 : _s.buildings) === null || _t === void 0 ? void 0 : _t.map(building => {
+                ${(_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>`;
@@ -147,56 +159,135 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
         <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 inspection>
               <span name bold>
@@ -205,11 +296,11 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
               </span>
               <span>
                 <div>검측요청</div>
-                <div bold>${this.inspectionSummary.wait}</div>
+                <div bold>${this.inspectionSummary.request}</div>
               </span>
               <span>
                 <div>검측대기</div>
-                <div bold>${this.inspectionSummary.request}</div>
+                <div bold>${this.inspectionSummary.wait}</div>
               </span>
               <span>
                 <div>합격</div>
@@ -244,13 +335,15 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
                 <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 && BUILDING_INSPECTION_STATUS[inspection.status]}
+                      </td>
                     </tr>`;
         })}
                 </tbody>
@@ -278,6 +371,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             name
             startDate
             endDate
+            projectType
             mainPhoto {
               fullpath
             }
@@ -287,6 +381,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             inspPassRate
             robotProgressRate
             structuralSafetyRate
+            robotCount
             buildingComplex {
               id
               address
@@ -308,6 +403,7 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
               notice
               householdCount
               buildingCount
+              virtualTourLink
               buildings {
                 id
                 name
@@ -329,8 +425,11 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
               status
               requestDate
               buildingLevel {
+                id
                 floor
+                floorDisplayName
                 building {
+                  id
                   name
                 }
               }
@@ -364,8 +463,15 @@ let ProjectDetail = class ProjectDetail extends ScopedElementsMixin(PageView) {
             this.weather = await _getWeather(latitude, longitude);
         }
     }
-    _onClickInspection(buildingInspectionId) {
-        navigate(`building-inspection-detail-drawing/${buildingInspectionId}`);
+    _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
@@ -398,7 +504,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 +516,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,7 +568,7 @@ ProjectDetail.styles = [
       div[body] {
         display: flex;
         margin: var(--spacing-large, 12px);
-        margin-top:0;
+        margin-top: 0;
         gap: var(--spacing-medium, 8px);
 
         h3 {
@@ -529,41 +654,55 @@ 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);
               }
             }
           }
 
           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,8 +712,8 @@ ProjectDetail.styles = [
 
                   & > span {
                     display: flex;
-                    align-item:center;
-                    var(--spacing-tiny, 2px);
+                    align-items: center;
+                    gap: var(--spacing-tiny, 2px);
                   }
                 }
               }
@@ -582,7 +721,7 @@ 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);
+              margin-top: 10px;
               background: #f6f6f6;
               border-radius: 7px;
               padding: var(--spacing-small, 4px) 0px;
@@ -610,7 +749,7 @@ ProjectDetail.styles = [
                 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 +760,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 +894,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 +903,10 @@ ProjectDetail.styles = [
               font-size: 13px;
             }
 
+            tbody td[status='FAIL'] {
+              color: #e15757;
+            }
+
             md-elevated-button {
               margin: 0 var(--spacing-small, 4px);