diff --git a/src/views/Dashboard/DashboardProject.js b/src/views/Dashboard/DashboardProject.js
index fde62f7..ebe52eb 100644
--- a/src/views/Dashboard/DashboardProject.js
+++ b/src/views/Dashboard/DashboardProject.js
@@ -73,6 +73,7 @@ const DashboardProject = () => {
     const [isSendingComment, setIsSendingComment] = useState(false);
     const [isReadyProjectDetail, setIsReadyProjectDetail] = useState(false);
     const [isReadySCurve, setIsReadySCurve] = useState(false);
+    const [isReadyGantt, setIsReadyGantt] = useState(false);
     const [isReadyOverdueActivities, setIsReadyOverdueActivities] = useState(false);
     const [isReadyIntegrationInvoice, setIsReadyIntegrationInvoice] = useState(false);
     const [isReadyReportDistribution, setIsReadyReportDistribution] = useState(false);
@@ -84,6 +85,7 @@ const DashboardProject = () => {
     const [assignedHr, setAssignedHr] = useState([]);
     const [assignedHrCount, setAssignedHrCount] = useState(0);
     const [actualHrCount, setActualHrCount] = useState(0);
+    const [dataGantt, setDataGantt] = useState({});
     let history = useHistory();
 
 
@@ -93,6 +95,7 @@ const DashboardProject = () => {
         getOverdueActivities()
         getReportDistribution()
         getComments()
+        getGantt()
         return () => {
             console.log('unmount RenderMap');
         }
@@ -138,6 +141,19 @@ const DashboardProject = () => {
         }
     }
 
+    const getGantt = async () => {
+      setIsReadyGantt(false)
+      const url = `${BASE_OSPRO}/api/version-gantt/edit/${GANTT_ID}`
+        try {
+            const response = await axios.get(url, HEADER)
+            setDataGantt(response)
+            setIsReadyGantt(true)
+        } catch (error) {
+            console.error('Failed to get gantt data:', error)
+            setIsReadyGantt(true)
+        }
+    }
+
     const getAssignedHR = async () => {
         const url = `${BASE_OSPRO}/api/project/manpower/assigned/${GANTT_ID}`
         try {
@@ -648,8 +664,8 @@ const DashboardProject = () => {
                                             </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 }}>
-                                                {isReadySCurve ?
-                                                    addCostToComplete ? renderFormatRupiah(addCostToComplete, 'Rp.') : '-'
+                                                {isReadyGantt ?
+                                                    dataGantt.data.data.cost_to_complete ? renderFormatRupiah(dataGantt.data.data.cost_to_complete.toString(), 'Rp.') : '-'
                                                     : <SingleTextLoader width={100} height={10} />
                                                 }
                                             </Col>
@@ -698,6 +714,12 @@ const DashboardProject = () => {
                                                 }
                                             </Col>
                                             <Col span={7} style={{ fontSize: 11, fontWeight: 'bold' }}><i className="fa fa-calendar" style={{ marginRight: 8 }}></i>Committed Cost</Col>
+                                            <Col span={5} style={{ fontSize: 11 }}>
+                                                {isReadyGantt ?
+                                                    dataGantt.data.data.committed_cost ? renderFormatRupiah(dataGantt.data.data.committed_cost.toString(), 'Rp.') : '-'
+                                                    : <SingleTextLoader width={100} height={10} />
+                                                }
+                                            </Col>
                                         </Row>
                                     </div>
                                 </div>