diff --git a/src/views/Dashboard/DashboardProject.js b/src/views/Dashboard/DashboardProject.js
index 92cb313..7922ef8 100644
--- a/src/views/Dashboard/DashboardProject.js
+++ b/src/views/Dashboard/DashboardProject.js
@@ -59,7 +59,7 @@ const DashboardProject = () => {
     const [estAtCompletion, setEstAtCompletion] = useState(null)
     const [bcwp, setBcwp] = useState(null)
     const [costDeviation, setCostDeviation] = useState(null)
-    const [remToComplete, setRemToComplete] = useState(null)
+    const [remToComplete, setRemToComplete] = useState(0)
     const [totalInvoice, setTotalInvoice] = useState(null)
     const [cashIn, setCashIn] = useState(null)
     const [outstandingBalance, setOutstandingBalance] = useState(null)
@@ -95,6 +95,15 @@ const DashboardProject = () => {
         }
     }, [activeTabIdx]);
 
+    useEffect(() => {
+		let deviation = 0;
+		if(plannedCost && totalCost){
+			deviation = plannedCost - totalCost;
+		}
+		setRemToComplete(deviation)
+
+    }, [plannedCost, totalCost]);
+
     const getProjectDetail = async () => {
         setIsReadyProjectDetail(false);
         const URL = `${BASE_OSPRO}/api/project/detail/${PROJECT_ID}`;
@@ -160,7 +169,7 @@ const DashboardProject = () => {
                 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())
+                // 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())
@@ -596,10 +605,10 @@ const DashboardProject = () => {
                                         <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}}>
-                                                {/* {isReadyProjectDetail && isReadyIntegrationInvoice ? */}
-                                                {/*     remToComplete ? renderFormatRupiah(plannedCost - totalCost, 'Rp.') : '-' */}
-                                                {/*     : <SingleTextLoader width={100} height={10} /> */}
-                                                {/* } */}
+                                                {isReadyProjectDetail && isReadyIntegrationInvoice ?
+                                                    remToComplete ? renderFormatRupiah(remToComplete, 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
                                             </Col>
                                         </Row>
                                     </div>