ordo
/
surveyor_indonesia_frontend
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update project dashboard, add progress bar, and add health project/cost

pull/2/head
bnu 2 years ago
parent
d83587b602
commit
0004308f34
3 changed files with 77 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/views/DashboardProject/chatDashboard.js
  2. 54
      src/views/DashboardProject/index.js
  3. 37
      src/views/DashboardProject/progressBar.js

6
src/views/DashboardProject/chatDashboard.js
Unescape View File

@ -3,7 +3,7 @@ const ChatDashboard = () => {
return (
<div style={{ margin: '0 5px' }} className="box-header-dashboard-project">
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>COMUNICATION</div>
<div style={{ marginBottom: '5px', fontSize: '0.8rem', fontWeight: '500' }}>Minutes of Meeting</div>
</div>
<div className='chat'>
<div className="chat-content">
@ -12,7 +12,7 @@ const ChatDashboard = () => {
Robert William
</div>
<div className='chat-body-content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Read More...
</div>
<div className='chat-footer'>
14/01/22 14:21
@ -25,7 +25,7 @@ const ChatDashboard = () => {
Jennifer lawrence
</div>
<div className='chat-body-content'>
Curabitur lobortis tellus nibh, at tincidunt turpis viverra at. Integer aliquam in quam eu fringilla. Nullam eu mauris gravida
Curabitur lobortis tellus nibh, at tincidunt turpis viverra at. Integer aliquam in quam eu fringilla. Nullam eu mauris Read More...
</div>
<div className='chat-footer'>
14/01/22 10:20

54
src/views/DashboardProject/index.js
Unescape View File

@ -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>

37
src/views/DashboardProject/progressBar.js
Unescape View File

@ -0,0 +1,37 @@
import React from "react";
const ProgressBar = (props) => {
const { bgcolor, completed } = props;
const containerStyles = {
height: 25,
width: '100%',
backgroundColor: "#e0e0de",
borderRadius: 50,
margin: 0
}
const fillerStyles = {
height: '100%',
width: `${completed}%`,
backgroundColor: bgcolor,
borderRadius: 'inherit',
textAlign: 'right'
}
const labelStyles = {
padding: 5,
color: 'white',
fontWeight: 'bold'
}
return (
<div style={containerStyles}>
<div style={fillerStyles}>
<span style={labelStyles}>{`${completed}%`}</span>
</div>
</div>
);
};
export default ProgressBar;
Write Preview
Loading…
Cancel
Save