diff --git a/src/routes.js b/src/routes.js
index 669c3db..2537fb9 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -95,7 +95,7 @@ const routes = [
 	{ path: '/user-admin', exact: true, name: 'User Admin', component: UserAdmin },
 	{ path: '/user-shift', exact: true, name: 'Shift', component: UserShift },
 	{ path: '/working-hour', exact: true, name: 'Working Hour', component: Shift },
-	{ path: '/dashboard-project/:id', exact: true, name: 'Dashboard Project', component: DashboardProject },
+	{ path: '/dashboard-project/:ID', exact: true, name: 'Dashboard Project', component: DashboardProject },
 ];
 
 export default routes;
diff --git a/src/views/DashboardProject/index.js b/src/views/DashboardProject/index.js
index 92869ba..ee01862 100644
--- a/src/views/DashboardProject/index.js
+++ b/src/views/DashboardProject/index.js
@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Row, Col, Select, Divider } from 'antd';
 import moment from 'moment'
 import Gantt from './ganttDashboard';
 import TableDashboard from './tableDashboard';
 import ChatDashboard from './chatDashboard';
+import axios from 'axios'
+import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { useParams } from 'react-router-dom';
+import { BASE_OSPRO } from '../../const/ApiConst';
 
 function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
   return (
@@ -19,30 +22,75 @@ function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
 }
 
 const DashboardProject = () => {
-  const { id } = useParams();
-  console.log("test ", id)
+  const { ID } = useParams();
+  const [STATUSPROJECT, SET_STATUSPROJECT] = useState([])
+  const [PROJECTMGR, SET_PROJECTMGR] = useState([])
+  const [RO, SET_RO] = useState([])
+  // Schedule
+  const [STARTDATE, SET_STARTDATE] = useState([])
+  const [BASELINEFINISHDATE, SET_BASELINEFINISHDATE] = useState([])
+  const [ESTFINISHDATE, SET_ESTFINISHDATE] = useState([])
+  // Financials
+  const [BCWP, SET_BCWP] = useState([])
+  const [ACWP, SET_ACWP] = useState([])
+  const [VARIANCE, SET_VARIANCE] = useState([])
+  const [BUDGET, SET_BUDGET] = useState([])
+  const [PROJECTNAME, SET_PROJECTNAME] = useState([])
+
+
+
+  const token = localStorage.getItem("token")
+	const HEADER = {
+		headers: {
+			"Content-Type": "application/json",
+			"Authorization": `Bearer ${token}`
+		}
+	} 	
+
+  const getProjectDetail = async () => {
+    const URL = `${BASE_OSPRO}/api/project/dashboard/${ID}`
+    const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
+    if (result.data.code !== 200) {
+      NotificationManager.error('Belum ada data proyek!', 'Failed');
+    } 
+    let resData; 
+    result.data.data.map(datas => resData = datas);
+    SET_BUDGET(resData.rencana_biaya)
+    SET_PROJECTMGR(resData.pm)
+    SET_RO(resData.company)
+    SET_PROJECTNAME(resData.name_project)
+    SET_STARTDATE(resData.start)
+    SET_BASELINEFINISHDATE(resData.finish)
+  }
+
+  useEffect(() => {
+    getProjectDetail();
+  }, [])
+
+
   return (
     <div style={{ margin: "-15px" }}>
       <Row>
-        <Col span={5}>
+        <Col span={7}>
           <div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project">
             <div><i style={{ color: 'teal' }} class="zmdi zmdi-assignment zmdi-hc-lg"></i></div>
-            <div style={{ textTransform: 'uppercase' }}>Project Status</div>
-            <div style={{ marginTop: 5 }} className='health-status-good' />
+            <div style={{ textTransform: 'uppercase' }}>Project </div>
+            {/* <div style={{ marginTop: 5 }} className='health-status-good' /> */}
+            <div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}> {PROJECTNAME}</div>
           </div>
         </Col>
-        <Col span={7}>
+        <Col span={5}>
           <div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project">
             <div><i style={{ color: '#0284c7' }} class="zmdi zmdi-account zmdi-hc-lg"></i></div>
-            <div style={{ textTransform: 'uppercase' }}>Project Manager</div>
-            <div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>Mark Julius</div>
+            <div style={{ textTransform: 'uppercase' }}>PM</div>
+            <div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>{PROJECTMGR}</div>
           </div>
         </Col>
         <Col span={7}>
           <div style={{ display: 'flex', justifyContent: 'space-between', margin: '0 5px' }} className="box-header-dashboard-project">
             <div><i style={{ color: '#b91c1c' }} class="zmdi zmdi-home zmdi-hc-lg"></i></div>
-            <div style={{ textTransform: 'uppercase' }}>RO</div>
-            <div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>Capitol Corp</div>
+            <div style={{ textTransform: 'uppercase' }}>Company</div>
+            <div style={{ fontWeight: 500, color: '#404040', textTransform: 'uppercase' }}>{RO}</div>
           </div>
         </Col>
         <Col span={5}>
@@ -64,7 +112,7 @@ const DashboardProject = () => {
                   <Col span={22}>
                     <div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
                       <div>Start Date</div>
-                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>April 1, 2022</div>
+                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>{moment(STARTDATE).format("LL")}</div>
                     </div>
                   </Col>
                 </Row>
@@ -75,7 +123,7 @@ const DashboardProject = () => {
                   <Col span={22}>
                     <div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
                       <div>Baseline Finish Date</div>
-                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>September 30, 2022</div>
+                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>{moment(BASELINEFINISHDATE).format("LL")}</div>
                     </div>
                   </Col>
                 </Row>
@@ -86,7 +134,7 @@ const DashboardProject = () => {
                   <Col span={22}>
                     <div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}>
                       <div>Estimated Finish Date</div>
-                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>April 1, 2023</div>
+                      <div style={{ fontWeight: 500, color: '#8c8c8c' }}>{moment(ESTFINISHDATE).format("LL")}</div>
                     </div>
                   </Col>
                 </Row>
@@ -135,7 +183,7 @@ const DashboardProject = () => {
           <Col span={5}>
             <BoxDashboard
               icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-lg"></i>}
-              value="3.200.000.000"
+              value={BUDGET}
               bgColor="#059669"
               title="Budget" />