|
|
|
@ -8,10 +8,10 @@ import ChatDashboard from './chatDashboard';
|
|
|
|
|
import axios from 'axios' |
|
|
|
|
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
|
|
|
import { useParams } from 'react-router-dom'; |
|
|
|
|
import { Badge } from 'reactstrap'; |
|
|
|
|
import { BASE_OSPRO } from '../../const/ApiConst'; |
|
|
|
|
import { |
|
|
|
|
formatThousand, |
|
|
|
|
} from "../../const/CustomFunc"; |
|
|
|
|
import {formatRibuanDecimal} from "../../const/CustomFunc"; |
|
|
|
|
import ProgressBar from "./progressBar"; |
|
|
|
|
|
|
|
|
|
function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) { |
|
|
|
|
return ( |
|
|
|
@ -25,7 +25,18 @@ function BoxDashboard({ value, title, secondaryTitle, icon, bgColor }) {
|
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function RenderHealthProject({params}){ |
|
|
|
|
if (params == "on-budget") { |
|
|
|
|
return (<Badge style = {{fontSize:"18px"}} color="success">On Budget</Badge>) |
|
|
|
|
} else if (params == "warning") { |
|
|
|
|
return (<Badge style = {{fontSize:"18px"}} color="warning">Warning</Badge>) |
|
|
|
|
} else { |
|
|
|
|
return (<Badge style = {{fontSize:"18px"}} color="danger">Danger</Badge>) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const DashboardProject = () => { |
|
|
|
|
|
|
|
|
|
const { ID } = useParams(); |
|
|
|
|
const [STATUSPROJECT, SET_STATUSPROJECT] = useState([]) |
|
|
|
|
const [PROJECTMGR, SET_PROJECTMGR] = useState([]) |
|
|
|
@ -38,9 +49,11 @@ const DashboardProject = () => {
|
|
|
|
|
const [BCWP, SET_BCWP] = useState([]) |
|
|
|
|
const [ACWP, SET_ACWP] = useState([]) |
|
|
|
|
const [VARIANCE, SET_VARIANCE] = useState([]) |
|
|
|
|
const [PROGRESS, SET_PROGRESS] = useState([]) |
|
|
|
|
const [BUDGET, SET_BUDGET] = useState([]) |
|
|
|
|
const [PROJECTNAME, SET_PROJECTNAME] = useState([]) |
|
|
|
|
const [CURRENCYSYMBOL, SET_CURRENCYSYMBOL] = useState([]) |
|
|
|
|
const [BUDGETHEALTH, SET_BUDGETHEALTH] = useState([]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -58,8 +71,8 @@ const DashboardProject = () => {
|
|
|
|
|
if (result.data.code !== 200) { |
|
|
|
|
NotificationManager.error('Belum ada data proyek!', 'Failed'); |
|
|
|
|
} |
|
|
|
|
let resData; |
|
|
|
|
result.data.data.map(datas => resData = datas); |
|
|
|
|
let resData = result.data.data; |
|
|
|
|
// result.data.data.map(datas => resData = datas);
|
|
|
|
|
SET_BUDGET(resData.rencana_biaya) |
|
|
|
|
SET_PROJECTMGR(resData.pm) |
|
|
|
|
SET_RO(resData.company) |
|
|
|
@ -67,6 +80,9 @@ const DashboardProject = () => {
|
|
|
|
|
SET_STARTDATE(resData.start) |
|
|
|
|
SET_BASELINEFINISHDATE(resData.finish) |
|
|
|
|
SET_CURRENCYSYMBOL(resData.currency_symbol) |
|
|
|
|
SET_BUDGETHEALTH(resData.budget_health) |
|
|
|
|
SET_ACWP(resData.actualCost) |
|
|
|
|
SET_PROGRESS(resData.progress) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
@ -155,8 +171,8 @@ const DashboardProject = () => {
|
|
|
|
|
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col> |
|
|
|
|
<Col span={22}> |
|
|
|
|
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
|
<div>Budget To Date (BCWP)</div> |
|
|
|
|
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 2.000.000.000</div> |
|
|
|
|
<div>Budget Proyek</div> |
|
|
|
|
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(BUDGET)}`}</div> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
@ -166,8 +182,8 @@ const DashboardProject = () => {
|
|
|
|
|
<Col span={2}><i style={{ color: '#059669' }} class="zmdi zmdi-money zmdi-hc-lg"></i></Col> |
|
|
|
|
<Col span={22}> |
|
|
|
|
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
|
<div>Actual To Date (ACWP)</div> |
|
|
|
|
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 1.700.000.000</div> |
|
|
|
|
<div>Actual Cost</div> |
|
|
|
|
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(ACWP)}`}</div> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
@ -178,7 +194,7 @@ const DashboardProject = () => {
|
|
|
|
|
<Col span={22}> |
|
|
|
|
<div style={{ textTransform: 'uppercase', display: 'flex', justifyContent: 'space-between' }}> |
|
|
|
|
<div>Variance</div> |
|
|
|
|
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>Rp. 300.000.000</div> |
|
|
|
|
<div style={{ fontWeight: 500, color: '#8c8c8c' }}>{`${formatRibuanDecimal(BUDGET - ACWP)}`}</div> |
|
|
|
|
</div> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
@ -187,20 +203,24 @@ const DashboardProject = () => {
|
|
|
|
|
|
|
|
|
|
</Col> |
|
|
|
|
<Col span={5}> |
|
|
|
|
<BoxDashboard |
|
|
|
|
{/* <BoxDashboard |
|
|
|
|
// icon={<i style={{ color: '#fff' }} class="zmdi zmdi-money zmdi-hc-lg"></i>}
|
|
|
|
|
value={`${CURRENCYSYMBOL} ${formatThousand(BUDGET)}`} |
|
|
|
|
value={`${CURRENCYSYMBOL} ${formatRibuanDecimal(BUDGET)}`} |
|
|
|
|
bgColor="#059669" |
|
|
|
|
title="Budget" /> |
|
|
|
|
title="Budget" /> */} |
|
|
|
|
<div style={{ backgroundColor: "#059669" }} className='box-header-dashboard-project'> |
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|
|
|
|
<div style={{ fontSize: '0.8rem', fontWeight: 500, color: '#fff', textTransform: 'uppercase' }}>Progress</div> |
|
|
|
|
</div> |
|
|
|
|
<ProgressBar bgcolor="#ffc355" completed={PROGRESS} /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div style={{ margin: '5px 0' }} className="box-header-dashboard-project"> |
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'center' }}> |
|
|
|
|
<div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>HEALTH PROJECT</div> |
|
|
|
|
</div> |
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-evenly', }}> |
|
|
|
|
<div style={{ marginTop: 5 }} className='health-status-good' /> |
|
|
|
|
<div style={{ marginTop: 5 }} className='health-status-warning' /> |
|
|
|
|
<div style={{ marginTop: 5 }} className='health-status-danger' /> |
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'space-evenly', }}>
|
|
|
|
|
<RenderHealthProject params = {`${BUDGETHEALTH}`}/>
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|