|
|
|
@ -61,6 +61,7 @@ const DashboardBOD = (props) => {
|
|
|
|
|
const [READY_TABLE_DETAIL_EXPENDITURE, SET_READY_TABLE_DETAIL_EXPENDITURE] = useState(false); |
|
|
|
|
const [DATA_DETAIL_EXPENDITURE, SET_DATA_DETAIL_EXPENDITURE] = useState([]); |
|
|
|
|
useEffect(() => { |
|
|
|
|
actualProgressProject(); |
|
|
|
|
getCompanyCashFlow(); // expenditure
|
|
|
|
|
getCompanyExpenditureColor(); // expenditure Color
|
|
|
|
|
getCompanyFinancialHealthColor(); // financial health Color
|
|
|
|
@ -111,6 +112,11 @@ const DashboardBOD = (props) => {
|
|
|
|
|
SET_PROJECT_EXPENDITURE_COLOR(result.data.data) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const actualProgressProject = async () => { |
|
|
|
|
const URL = `${BASE_OSPRO}/api/project/actual-progress-project-command`; |
|
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const getCompanyFinancialHealthColor = async () => { |
|
|
|
|
const URL = `${BASE_OSPRO}/api/dashboard/get-detail-financial-health-color/${role_name}` |
|
|
|
|
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
|
|
@ -437,20 +443,11 @@ const DashboardBOD = (props) => {
|
|
|
|
|
<div style={{ color: '#888888', fontSize: 12 }}>Total Project Expenditure from on-going project.</div> |
|
|
|
|
</div> |
|
|
|
|
{PROJECT_EXPENDITURE ? |
|
|
|
|
<> |
|
|
|
|
<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }} onClick={handleGetDetailExpenditure}> |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, cursor: 'pointer', fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}> |
|
|
|
|
Detailed View |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
{/* <div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> |
|
|
|
|
<Link to="/dashboard-perproject" style={{ textDecoration: 'none' }}> |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, cursor: 'pointer', fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}> |
|
|
|
|
All Dashboard |
|
|
|
|
</div> |
|
|
|
|
</Link> |
|
|
|
|
</div> */} |
|
|
|
|
</> |
|
|
|
|
: |
|
|
|
|
<div style={{ flex: 6, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> |
|
|
|
|
<div style={{ backgroundColor: '#DDDDDD', color: '#4C4747', borderRadius: 5, padding: 4, fontWeight: 500, fontSize: 12, textAlign: 'center', lineHeight: 'normal' }}>Detailed View</div> |
|
|
|
@ -475,12 +472,7 @@ const DashboardBOD = (props) => {
|
|
|
|
|
y: { |
|
|
|
|
ticks: { |
|
|
|
|
autoSkip: false, |
|
|
|
|
stepSize: 2, |
|
|
|
|
// callback: function (value) {
|
|
|
|
|
// if (value === 0 || value === null || value === undefined) {
|
|
|
|
|
// return '';
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
stepSize: 2 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
@ -501,38 +493,41 @@ const DashboardBOD = (props) => {
|
|
|
|
|
data={{ |
|
|
|
|
labels: [ |
|
|
|
|
`Target Pendapatan ${moment().format('YYYY')}`, |
|
|
|
|
'Realisasi Pendapatan', |
|
|
|
|
'Realisasi Cash In', |
|
|
|
|
'Anggaran Biaya', |
|
|
|
|
'Realisasi Anggaran Biaya', |
|
|
|
|
'Laba' |
|
|
|
|
'Income Year', |
|
|
|
|
'Total Nilai Proyek', |
|
|
|
|
// 'Anggaran Biaya',
|
|
|
|
|
// 'Realisasi Anggaran Biaya',
|
|
|
|
|
// 'Laba'
|
|
|
|
|
], |
|
|
|
|
datasets: [ |
|
|
|
|
{ |
|
|
|
|
label: '', |
|
|
|
|
data: [ |
|
|
|
|
PROJECT_EXPENDITURE?.total_budget || 0, |
|
|
|
|
PROJECT_EXPENDITURE?.total_expenditure || 0, |
|
|
|
|
PROJECT_EXPENDITURE?.total_invoice ? Math.floor(PROJECT_EXPENDITURE.total_invoice) : 0, |
|
|
|
|
PROJECT_EXPENDITURE?.total_paid_invoice || 0, |
|
|
|
|
PROJECT_EXPENDITURE?.total_paid_invoice || 0, |
|
|
|
|
PROJECT_EXPENDITURE?.total_paid_invoice || 0 |
|
|
|
|
// PROJECT_EXPENDITURE?.total_budget || 0,
|
|
|
|
|
// PROJECT_EXPENDITURE?.total_expenditure || 0,
|
|
|
|
|
// PROJECT_EXPENDITURE?.total_invoice ? Math.floor(PROJECT_EXPENDITURE.total_invoice) : 0,
|
|
|
|
|
// PROJECT_EXPENDITURE?.total_paid_invoice || 0,
|
|
|
|
|
// PROJECT_EXPENDITURE?.total_paid_invoice || 0,
|
|
|
|
|
// PROJECT_EXPENDITURE?.total_paid_invoice || 0
|
|
|
|
|
98000000000, |
|
|
|
|
PROJECT_EXPENDITURE?.total_income_year || 0, |
|
|
|
|
PROJECT_EXPENDITURE?.total_value_proyek || 0 |
|
|
|
|
], |
|
|
|
|
borderColor: [ |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_budget || '#480ca8', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_expenditure || '#b5179e', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_invoice || '#a26a16', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#4c4747', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#e00000', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#033a37' |
|
|
|
|
// PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#4c4747',
|
|
|
|
|
// PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#e00000',
|
|
|
|
|
// PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#033a37'
|
|
|
|
|
], |
|
|
|
|
backgroundColor: [ |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_budget || '#480ca8', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_expenditure || '#b5179e', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_invoice || '#a26a16', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#4c4747', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#e00000', |
|
|
|
|
PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#033a37' |
|
|
|
|
// PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#4c4747',
|
|
|
|
|
// PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#e00000',
|
|
|
|
|
// PROJECT_EXPENDITURE_COLOR?.total_paid_invoice || '#033a37'
|
|
|
|
|
], |
|
|
|
|
borderRadius: 5, |
|
|
|
|
borderSkipped: false |
|
|
|
|