update connect api DashboardProject

src/views/Dashboard/DashboardProject.js

@@ -10,6 +10,7 @@ import { renderFormatRupiah } from '../../const/CustomFunc';
 import { BASE_OSPRO } from '../../const/ApiConst';
 import { SendOutlined } from '@ant-design/icons';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
+import ContentLoader from 'react-content-loader';
 const { TextArea } = Input;
 
 const styles = {
@@ -35,42 +36,51 @@ const DashboardProject = () => {
 	}
     const { PROJECT_ID, GANTT_ID } = useParams();
     // const URL_GANTT = `http://103.73.125.81:8446/index.html?base_url=http://103.73.125.81:8444/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
-    const URL_GANTT = `https://adw-gantt.ospro.id/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
+    // const URL_GANTT = `https://adw-gantt.ospro.id/index.html?base_url=${BASE_OSPRO}/api&gantt_id=${GANTT_ID}&proyek_id=${PROJECT_ID}&token=${token}&ro=1`;
-    // const URL_GANTT = '';
+    const URL_GANTT = '';
     const mapRef = useRef()
-    const [projectName, setProjectName] = useState("Project Tower ABC");
+    const [projectName, setProjectName] = useState("");
-    const [projectManagerName, setProjectManagerName] = useState("John Doe");
+    const [projectManagerName, setProjectManagerName] = useState("");
-    const [customerName, setCustomerName] = useState("Jaya Gedung Group");
+    const [customerName, setCustomerName] = useState("");
-    const [plannedStart, setPlannedStart] = useState("2019-03-04")
+    const [plannedStart, setPlannedStart] = useState(null)
-    const [plannedFinish, setPlannedFinish] = useState("2020-05-28")
+    const [plannedFinish, setPlannedFinish] = useState(null)
-    const [actualStart, setActualStart] = useState("2019-03-04")
+    const [actualStart, setActualStart] = useState(null)
-    const [actualFinish, setActualFinish] = useState("2020-05-28")
+    const [actualFinish, setActualFinish] = useState(null)
-    const [estimatedFinish, setEstimatedFinish] = useState("2020-05-28")
+    const [estimatedFinish, setEstimatedFinish] = useState(null)
     const [mymap, setMymap] = useState(null);
     const [activeTabIdx, setActiveTabIdx] = useState(0);
     const [activeTabCommentIdx, setActiveTabCommentIdx] = useState(0);
     const [planningProgress, setPlanningProgress] = useState(79);
     const [actualProgress, setActualProgress] = useState(43);
-    const [currentBudget, setCurrentBudget] = useState("168011727772");
+    const [currentBudget, setCurrentBudget] = useState(null)
-    const [addCostToComplete, setAddCostToComplete] = useState("0");
+    const [addCostToComplete, setAddCostToComplete] = useState(null)
-    const [actualToDate, setactualToDate] = useState("43256751714"); 
+    const [actualToDate, setActualToDate] = useState(null)
-    const [estAtCompletion, setEstAtCompletion] = useState("168011727772");
+    const [estAtCompletion, setEstAtCompletion] = useState(null)
-    const [bcwp, setBcwp] = useState("26658794618");
+    const [bcwp, setBcwp] = useState(null)
-    const [costDeviation, setCostDeviation] = useState("0");
+    const [costDeviation, setCostDeviation] = useState(null)
-    const [remToComplete, setRemToComplete] = useState("124754976058");
+    const [remToComplete, setRemToComplete] = useState(null)
-    const [totalInvoice, setTotalInvoice] = useState("10000000000");
+    const [totalInvoice, setTotalInvoice] = useState(null)
-    const [cashIn, setCashIn] = useState("8000000000");
+    const [cashIn, setCashIn] = useState(null)
-    const [outstandingBalance, setOutstandingBalance] = useState("2000000000");
+    const [outstandingBalance, setOutstandingBalance] = useState(null)
     const [comment, setComment] = useState('');
     const [comments, setComments] = useState([]);
     const [isReadyComments, setIsReadyComments] = useState(false);
     const [isSendingComment, setIsSendingComment] = useState(false);
-    const [behindTasks, setBehindTasks] = useState([]);
+
+    const [isReadyProjectDetail, setIsReadyProjectDetail] = useState(false);
+    const [isReadySCurve, setIsReadySCurve] = useState(false);
+    const [isReadyOverdueActivities, setIsReadyOverdueActivities] = useState(false);
+    const [overdueActivities, setOverdueActivities] = useState([]);
+
+    const [healthBySchedule, setHealthBySchedule] = useState('-')
+    const [healthByBudget, setHealthByBudget] = useState('-')
 
     useEffect(() => {
         // console.log('URL_GANTT', URL_GANTT);
+        getProjectDetail();
+        getSCurve();
+        getOverdueActivities();
         getComments();
-        getBehindTasks();
         return () => {
             console.log('unmount RenderMap');
         }
@@ -82,6 +92,102 @@ const DashboardProject = () => {
         }
     }, [activeTabIdx]);
 
+    const getProjectDetail = async () => {
+        setIsReadyProjectDetail(false);
+        const URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
+        const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
+        console.log('getProjectDetail', result);
+        if (!result) {
+            NotificationManager.error(`Could not connect to internet.`, "Failed");
+            setIsReadyProjectDetail(true);
+			return;
+        }
+
+        if (result.status !== 200) {
+			NotificationManager.error(`Get project detail failed, ${result.data.message}`, "Failed");
+            setIsReadyProjectDetail(true);
+			return;
+		}
+        else if (result.status == 200 && result.data.data) {
+            console.log(result.data.data);
+			// setComments(result.data.data);
+            setProjectName(result.data.data.nama ? result.data.data.nama : '-');
+            setProjectManagerName(result.data.data.projectManager ? result.data.data.projectManager : '-');
+            setCustomerName(result.data.data.company ? result.data.data.company : '-')
+            setPlannedStart(result.data.data?.mulai_proyek ? result.data.data.mulai_proyek : null)
+            setPlannedFinish(result.data.data?.akhir_proyek ? result.data.data.akhir_proyek : null)
+            setActualStart(result.data.data.header?.start_date ? result.data.data.header.start_date : null)
+            setEstimatedFinish(result.data.data.header?.end_date ? result.data.data.header.end_date : null)
+            setIsReadyProjectDetail(true);
+		}
+    }
+
+    const getSCurve = async () => {
+        setIsReadySCurve(false);
+        const URL = `${BASE_OSPRO}/api/project/get-s-curve`;
+        const payload = {
+            "project_id": PROJECT_ID.toString(),
+            "period": "week",
+            "end_date": moment(new Date()).format('YYYY-MM-DD')
+        }
+        const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
+        console.log('getSCurve', result);
+        if (!result) {
+            NotificationManager.error(`Could not connect to internet.`, "Failed");
+            setIsReadySCurve(true);
+			return;
+        }
+
+        if (result.status !== 200) {
+			NotificationManager.error(`Get S Curve failed, ${result.data.message}`, "Failed");
+            setIsReadySCurve(true);
+			return;
+		}
+        else if (result.status == 200 && result.data.data) {
+            console.log(result.data.data);
+            if (result.data.data.length > 0 && result.data.data[0].data?.budget_control) {
+                setCurrentBudget(result.data.data[0].data.budget_control.current_budget?.toString())
+                setActualToDate(result.data.data[0].data.budget_control.acwp?.toString())
+                setBcwp(result.data.data[0].data.budget_control.current_budget?.toString())
+                setRemToComplete(result.data.data[0].data.budget_control.rem_to_complete?.toString())
+                setAddCostToComplete(result.data.data[0].data.budget_control.add_cost_to_complete?.toString())
+                setEstAtCompletion(result.data.data[0].data.budget_control.estimated_at_completion?.toString())
+                setCostDeviation(result.data.data[0].data.budget_control.cost_deviation?.toString())
+            }
+            setIsReadySCurve(true);
+		}
+    }
+
+    const getOverdueActivities = async () => {
+        setIsReadyOverdueActivities(false);
+        const URL = `${BASE_OSPRO}/api/project/get-overdue-activities`;
+        const payload = {
+            "id": PROJECT_ID.toString(),
+            "till_date": moment(new Date()).format('YYYY-MM-DD')
+        }
+        const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response)
+        console.log('getOverdueActivities', result);
+        if (!result) {
+            NotificationManager.error(`Could not connect to internet.`, "Failed");
+            setIsReadyOverdueActivities(true);
+			return;
+        }
+
+        if (result.status !== 200) {
+			NotificationManager.error(`Get Overdue Activities failed, ${result.data.message}`, "Failed");
+            setIsReadyOverdueActivities(true);
+			return;
+		}
+        else if (result.status == 200 && result.data.data) {
+            console.log(result.data.data);
+            if (result.data.data.overdueActivities) {
+                setOverdueActivities(result.data.data.overdueActivities)
+            }
+            setHealthByBudget(result.data.data.budget_health)
+            setIsReadyOverdueActivities(true);
+		}
+    }
+
     const getComments = async () => {
         setIsReadyComments(false);
         const URL = `${BASE_OSPRO}/api/project-comment/search`;
@@ -120,7 +226,7 @@ const DashboardProject = () => {
         }
 
         if (result.status !== 200) {
-			NotificationManager.error(`Post comment failed, ${result.data.message}`, "Failed");
+			NotificationManager.error(`Get comments failed, ${result.data.message}`, "Failed");
             setIsReadyComments(true);
 			return;
 		}
@@ -132,7 +238,7 @@ const DashboardProject = () => {
     }
 
     const handleSendComment = async () => {
-        console.log('handleSendComment', comment);
+        // console.log('handleSendComment', comment);
         setIsSendingComment(true);
         if (comment === '') {
             NotificationManager.error("Please leave a comment before you send it.", "Failed");
@@ -171,25 +277,7 @@ const DashboardProject = () => {
         setIsSendingComment(false);
     }
 
-    const getBehindTasks = () => {
-        setBehindTasks([
-            {
-                id: 1,
-                name: "Tom",
-                message: "Overdue by 5 days",
-                division: "IT"
-            },
-            {
-                id: 1,
-                name: "Jerry",
-                message: "Overdue by 3 days",
-                division: "Finance"
-            }
-        ])
-    }
-
     const initMap = () => {
-        
         let mymap = L.map('map-area', {
             center: center,
             zoom: 13
@@ -214,6 +302,34 @@ const DashboardProject = () => {
 		></iframe>
 	), [activeTabIdx])
 
+    const SingleTextLoader = ({width, height}) => (
+        <ContentLoader
+            speed={1}
+            width={width ? width : 200}
+            height={height ? height : 20}
+            viewBox={`0 0 ${width ? width : 200} ${height ? height : 20}`}
+            backgroundColor="#E6E6E6"
+            foregroundColor="#ffffff"
+        >
+            <rect x="0" y="0" rx="5" ry="5" width={`${width ? width : 200}`} height={`${height ? height : 20}`} />
+        </ContentLoader>
+    )
+
+    const ListLoader = () => (
+        // <div style={{color: 'grey', flex: 1, textAlign: 'center', marginTop: 50, marginBottom: 50}}>Loading overdue activities...</div>
+        <div>
+            <SingleTextLoader width={"100%"} height={50} />
+            <div style={{marginBottom: 5}}></div>
+            <SingleTextLoader width={"100%"} height={50} />
+            <div style={{marginBottom: 5}}></div>
+            <SingleTextLoader width={"100%"} height={50} />
+            <div style={{marginBottom: 5}}></div>
+            <SingleTextLoader width={"100%"} height={50} />
+            <div style={{marginBottom: 5}}></div>
+            <SingleTextLoader width={"100%"} height={50} />
+        </div>
+    )
+
     const Comment = ({name, comment, created_at}) => (
         <div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
             <div style={{fontWeight: 'bold'}}>{name}</div>
@@ -222,11 +338,11 @@ const DashboardProject = () => {
         </div>
     )
 
-    const BehindTaskItem = ({name, message, division}) => (
+    const BehindTaskItem = ({name, message}) => (
         <div style={{backgroundColor: '#EEEEEE', border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', padding: 5, marginBottom: 5, marginRight: 2, marginLeft: 2}}>
             <div style={{fontWeight: 'bold'}}>{name}</div>
-            <div>{message}</div>
+            <div style={{color: '#E80053'}}>{message}</div>
-            <div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{division}</div>
+            {/* <div style={{color: '#E80053', textAlign: 'right', fontWeight: 500, fontSize: 12}}>{division}</div> */}
         </div>
     )
 
@@ -240,7 +356,7 @@ const DashboardProject = () => {
                 </div>
             </div>
             <div>
-                {!isReadyComments && <div style={{color: 'grey', flex: 1, textAlign: 'center', marginTop: 50, marginBottom: 50}}>Loading comments...</div>}
+                {!isReadyComments && <ListLoader />}
                 {isReadyComments && comments && comments.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No comments found.</div>}
                 {comments && comments.length > 0 && comments.map((item, idx) => 
                     <Comment key={idx} name={item.join_first_name} comment={item.comment} created_at={item.created_at} />
@@ -253,13 +369,24 @@ const DashboardProject = () => {
     const RenderBehindTasks = useMemo(() => {
         return (
             <div>
-                {behindTasks && behindTasks.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No behind task found.</div>}
+                {!isReadyOverdueActivities && <ListLoader />}
-                {behindTasks && behindTasks.length > 0 && behindTasks.map((item, idx) => 
+                {isReadyOverdueActivities && overdueActivities && overdueActivities.length < 1 && <div style={{flex: 1, textAlign: 'center', color: '#E80053', marginTop: 50, marginBottom: 50}}>No overdue activitiy found.</div>}
-                    <BehindTaskItem key={idx} name={item.name} message={item.message} division={item.division} />
+                {isReadyOverdueActivities && overdueActivities && overdueActivities.length > 0 && overdueActivities.map((item, idx) => {
-                )}
+                    let end_date = null;
+                    let today = null;
+                    let diffDays = 0;
+                    let message = '';
+                    if (item.end_date && item.end_date !== null) {
+                        end_date = moment(item.end_date);
+                        today = moment(new Date());
+                        diffDays = today.diff(end_date, 'days');
+                        message = `Overdue by ${diffDays} days`;
+                    }
+                    return <BehindTaskItem key={idx} name={item.name} message={message} />
+                })}
             </div>
         )
-    }, [behindTasks])
+    }, [overdueActivities, isReadyOverdueActivities])
 
 	return (
 		<div style={{ marginLeft: -25, marginRight: -25 }}>
@@ -272,7 +399,7 @@ const DashboardProject = () => {
                                 <div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
                                     <div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
                                         <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project</div>
-                                        <div style={{fontSize: 14}}>{projectName}</div>
+                                        <div style={{fontSize: 14}}>{isReadyProjectDetail ? projectName : <SingleTextLoader />}</div>
                                     </div>
                                     <div>
                                         <i className="fa fa-check-square" style={{fontSize: 28}}></i>
@@ -285,7 +412,7 @@ const DashboardProject = () => {
                                 <div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
                                     <div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
                                         <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Project Manager</div>
-                                        <div style={{fontSize: 14}}>{projectManagerName}</div>
+                                        <div style={{fontSize: 14}}>{isReadyProjectDetail ? projectManagerName : <SingleTextLoader />}</div>
                                     </div>
                                     <div>
                                         <i className="fa fa-user" style={{fontSize: 28}}></i>
@@ -298,7 +425,7 @@ const DashboardProject = () => {
                                 <div style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
                                     <div style={{ flex: 20, display: 'flex', flexDirection: 'column' }}>
                                         <div style={{fontSize: 16, fontWeight: 'bold', marginBottom: 10}}>Customer</div>
-                                        <div style={{fontSize: 14}}>{customerName}</div>
+                                        <div style={{fontSize: 14}}>{isReadyProjectDetail ? customerName : <SingleTextLoader />}</div>
                                     </div>
                                     <div>
                                         <i className="fa fa-home" style={{fontSize: 28}}></i>
@@ -317,19 +444,39 @@ const DashboardProject = () => {
                                     <div>
                                         <Row>
                                             <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Planned Start</Col>
-                                            <Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(plannedStart).format('D MMMM YYYY') : '-'}</Col>
+                                            <Col span={12} style={{fontSize: 11}}>
+                                                {isReadyProjectDetail ?
+                                                    plannedStart ? moment(plannedStart).format('D MMMM YYYY') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                         <Row>
                                             <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Acutal Start</Col>
-                                            <Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(actualStart).format('D MMMM YYYY') : '-'}</Col>
+                                            <Col span={12} style={{fontSize: 11}}>
+                                                {isReadyProjectDetail ?
+                                                    actualStart ? moment(actualStart).format('D MMMM YYYY') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                         <Row>
                                             <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Planned Finish</Col>
-                                            <Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(plannedFinish).format('D MMMM YYYY') : '-'}</Col>
+                                            <Col span={12} style={{fontSize: 11}}>
+                                                {isReadyProjectDetail ?
+                                                    plannedFinish ? moment(plannedFinish).format('D MMMM YYYY') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                         <Row>
                                             <Col span={12} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Estimated Finish</Col>
-                                            <Col span={12} style={{fontSize: 11}}>{plannedStart ? moment(estimatedFinish).format('D MMMM YYYY') : '-'}</Col>
+                                            <Col span={12} style={{fontSize: 11}}>
+                                                {isReadyProjectDetail ?
+                                                    estimatedFinish ? moment(estimatedFinish).format('D MMMM YYYY') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                     </div>
                                 </div>
@@ -344,25 +491,60 @@ const DashboardProject = () => {
                                     <div>
                                         <Row>
                                             <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Current Budget</Col>
-                                            <Col span={5} style={{fontSize: 11}}>{currentBudget ? renderFormatRupiah(currentBudget, 'Rp.') : '-' }</Col>
+                                            <Col span={5} style={{fontSize: 11}}>
+                                                {isReadySCurve ?
+                                                    currentBudget ? renderFormatRupiah(currentBudget, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                             <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Add Cost to Complete</Col>
-                                            <Col span={5} style={{fontSize: 11}}>{addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-' }</Col>
+                                            <Col span={5} style={{fontSize: 11}}>
+                                                {isReadySCurve ?
+                                                    addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                         <Row>
                                             <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Actual to Date</Col>
-                                            <Col span={5} style={{fontSize: 11}}>{actualToDate ? renderFormatRupiah(actualToDate, 'Rp.') : '-' }</Col>
+                                            <Col span={5} style={{fontSize: 11}}>
+                                                {isReadySCurve ?
+                                                    actualToDate ? renderFormatRupiah(actualToDate, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                             <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Est. at Completion</Col>
-                                            <Col span={5} style={{fontSize: 11}}>{estAtCompletion ? renderFormatRupiah(estAtCompletion, 'Rp.') : '-' }</Col>
+                                            <Col span={5} style={{fontSize: 11}}>
+                                                {isReadySCurve ?
+                                                    estAtCompletion ? renderFormatRupiah(estAtCompletion, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                         <Row>
                                             <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>BCWP (cost vs perform)</Col>
-                                            <Col span={5} style={{fontSize: 11}}>{bcwp ? renderFormatRupiah(bcwp, 'Rp.') : '-' }</Col>
+                                            <Col span={5} style={{fontSize: 11}}>
+                                                {isReadySCurve ?
+                                                    bcwp ? renderFormatRupiah(bcwp, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                             <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Cost Deviation</Col>
-                                            <Col span={5} style={{fontSize: 11}}>{costDeviation ? renderFormatRupiah(costDeviation, 'Rp.') : '-' }</Col>
+                                            <Col span={5} style={{fontSize: 11}}>
+                                                {isReadySCurve ?
+                                                    costDeviation ? renderFormatRupiah(costDeviation, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                         <Row>
                                             <Col span={7} style={{fontSize: 11, fontWeight: 'bold'}}><i className="fa fa-calendar" style={{marginRight:8}}></i>Rem. to Complete</Col>
-                                            <Col span={5} style={{fontSize: 11}}>{remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-' }</Col>
+                                            <Col span={5} style={{fontSize: 11}}>
+                                                {isReadySCurve ?
+                                                    remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                     </div>
                                 </div>
@@ -408,17 +590,17 @@ const DashboardProject = () => {
                     <Row>
                         <Col span={12}>
                             <div style={{backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginRight: 2}}>
-                                <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
+                                <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Budget</div>
-                                <div style={{backgroundColor: '#52AC0B', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10}}>
+                                <div style={{backgroundColor: '#52AC0B', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25}}>
-                                    <div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>On Budget</div>
+                                    <div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>{healthByBudget}</div>
                                 </div>
                             </div>
                         </Col>
                         <Col span={12}>
                             <div style={{backgroundColor: '#FFFFFF', padding: 10, border: 'solid', borderWidth: 1, borderColor: '#DDDDDD', marginBottom: 5, marginLeft: 2}}>
                                 <div style={{color: '#000000', textAlign: 'center', marginBottom: 10, fontWeight: 'bold', fontSize: 12}}>Health By Schedule</div>
-                                <div style={{backgroundColor: '#E80053', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10}}>
+                                <div style={{backgroundColor: '#E80053', color: '#FFFFFF', padding: 5, borderRadius: 10, marginBottom: 10, minHeight: 25}}>
-                                    <div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>Behind Schedule</div>
+                                    <div style={{textAlign: 'center', fontWeight: 500, fontSize: 12}}>{healthBySchedule}</div>
                                 </div>
                             </div>
                         </Col>