@ -318,11 +318,12 @@ const DashboardBOD = () => {
tableData . push ( {
"id" : item . id ,
"last_gantt_id" : item . lastGanttId ? . last _gantt _id ,
"kode_sortname" : item . kode _sortname ? . kode _sortname ? item . kode _sortname : "-" ,
"project_name" : item . nama ,
"project_manager" : item . pm ? . name ,
"planned_interval" : ` ${ item . mulai _proyek ? moment ( item . mulai _proyek ) . format ( 'DD/MM/YYYY' ) : '-' } - ${ item . akhir _proyek ? moment ( item . akhir _proyek ) . format ( 'DD/MM/YYYY' ) : '-' } ` ,
"manpower" : ` ${ item . manPowers } / ${ total _manpowers } ` ,
"project_budget" : item . rencana _biaya ? toRupiah ( item . rencana _biaya ) : '-' ,
"manpower" : ` ${ item . manPowers } / ${ total _manpowers } ` ,
"project_budget" : item . rencana _biaya ? toRupiah ( item . rencana _biaya ) : '-' ,
"invoice" : item . invoice ? . invoiced ? toRupiah ( item . invoice . invoiced ) : '-' ,
"cash_in" : item . invoice ? . paid ? toRupiah ( item . invoice . paid ) : '-' ,
"outstanding_balance" : outstanding _balance ,
@ -344,6 +345,7 @@ const DashboardBOD = () => {
isReady = { READY _TABLE _DETAIL _EXPENDITURE }
title = "Detail Project Expenditure"
tableHeader = { [
{ title : "Project Code" , key : "kode_sortname" } ,
{ title : "Project Name" , key : "project_name" } ,
{ title : "Project Manager" , key : "project_manager" } ,
{ title : "Planned Interval" , key : "planned_interval" } ,
@ -366,7 +368,7 @@ const DashboardBOD = () => {
const FloatingFilter = ( ) => {
return (
< div style = { { position : 'absolute' , float : 'right' } } >
< div style = { { position : 'absolute' , float : 'right' } } >
< Icon icon = "ion:filter" width = { 30 } height = { 30 } color = "#FFFFFF" / >
< / d i v >
)
@ -403,9 +405,9 @@ const DashboardBOD = () => {
< div style = { { position : 'relative' , height : '25vh' , margin : 'auto' , paddingBottom : 10 , justifyContent : 'center' } } >
{ READY _PROJECT _EXPENDITURE ?
PROJECT _EXPENDITURE ?
< Bar
options = { {
indexAxis : 'y' ,
< Bar
options = { {
indexAxis : 'y' ,
scales : {
x : {
ticks : {
@ -415,51 +417,51 @@ const DashboardBOD = () => {
}
}
} ,
elements : {
bar : {
borderWidth : 2 ,
elements : {
bar : {
borderWidth : 2 ,
} ,
} ,
} ,
responsive : true ,
maintainAspectRatio : false ,
plugins : {
legend : {
display : false ,
position : 'right' ,
labels : {
boxWidth : 10
responsive : true ,
maintainAspectRatio : false ,
plugins : {
legend : {
display : false ,
position : 'right' ,
labels : {
boxWidth : 10
}
} ,
datalabels : {
color : '#FFFFFF' ,
formatter : function ( value , context ) {
return value ? toRupiah ( value , { useUnit : 'jt' } ) : 0
}
}
} ,
datalabels : {
color : '#FFFFFF' ,
formatter : function ( value , context ) {
return value ? toRupiah ( value , { useUnit : 'jt' } ) : 0
} }
data = { {
labels : [ 'Total Budget' , 'Expenditure' , 'Invoice' , 'Cash In' ] ,
datasets : [
{
label : '' ,
// data: [COMPANY_CASHFLOW_TOTAL_BUDGET, COMPANY_CASHFLOW_EXPENDITURE, COMPANY_CASHFLOW_INVOICE, COMPANY_CASHFLOW_CASH_IN],
data : [
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _budget ? PROJECT _EXPENDITURE . total _budget : 0 ,
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _expenditure ? PROJECT _EXPENDITURE . total _expenditure : 0 ,
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _invoice ? PROJECT _EXPENDITURE . total _invoice : 0 ,
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _paid _invoice ? PROJECT _EXPENDITURE . total _paid _invoice : 0
] ,
borderColor : [ '#480CA8' , '#B5179E' , '#A26A16' , '#4C4747' ] ,
backgroundColor : [ '#480CA8' , '#B5179E' , '#A26A16' , '#4C4747' ] ,
borderRadius : 5 ,
borderSkipped : false
}
}
} ,
} }
data = { {
labels : [ 'Total Budget' , 'Expenditure' , 'Invoice' , 'Cash In' ] ,
datasets : [
{
label : '' ,
// data: [COMPANY_CASHFLOW_TOTAL_BUDGET, COMPANY_CASHFLOW_EXPENDITURE, COMPANY_CASHFLOW_INVOICE, COMPANY_CASHFLOW_CASH_IN],
data : [
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _budget ? PROJECT _EXPENDITURE . total _budget : 0 ,
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _expenditure ? PROJECT _EXPENDITURE . total _expenditure : 0 ,
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _invoice ? PROJECT _EXPENDITURE . total _invoice : 0 ,
PROJECT _EXPENDITURE && PROJECT _EXPENDITURE . total _paid _invoice ? PROJECT _EXPENDITURE . total _paid _invoice : 0
] ,
borderColor : [ '#480CA8' , '#B5179E' , '#A26A16' , '#4C4747' ] ,
backgroundColor : [ '#480CA8' , '#B5179E' , '#A26A16' , '#4C4747' ] ,
borderRadius : 5 ,
borderSkipped : false
}
] ,
} }
/ >
:
< NoDataChart / >
] ,
} }
/ >
:
< NoDataChart / >
:
< ContentLoader
speed = { 2 }
@ -491,7 +493,7 @@ const DashboardBOD = () => {
title = "Project By Financial Health"
subtitle = "Amount of project grouped by financial health."
chartType = "pie"
chartData = { PROJECT _BY _FINANCIAL _HEALTH ? {
chartData = { PROJECT _BY _FINANCIAL _HEALTH ? {
labels : [ "Cost Overrun" , "Early Warning" , "On Budget" ] ,
datasets : [
{
@ -517,7 +519,7 @@ const DashboardBOD = () => {
title = "Project By Schedule Health"
subtitle = "Amount of project grouped by Schedule health."
chartType = "pie"
chartData = { PROJECT _BY _SCHEDULE _HEALTH ? {
chartData = { PROJECT _BY _SCHEDULE _HEALTH ? {
labels : [ "Behind Schedule" , "Early Warning" , "On Schedule" ] ,
datasets : [
{
@ -572,7 +574,7 @@ const DashboardBOD = () => {
}
}
} }
chartData = { PROJECT _PER _DIVISION ? {
chartData = { PROJECT _PER _DIVISION ? {
// labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
labels : PROJECT _PER _DIVISION ? PROJECT _PER _DIVISION . map ( ( item , idx ) => item . name ) : [ ] ,
datasets : [
@ -618,13 +620,13 @@ const DashboardBOD = () => {
} ,
datalabels : {
color : '#FFFFFF' ,
formatter : function ( value , context ) {
return value ? toRupiah ( value , { useUnit : 'jt' } ) : 0
formatter : function ( value , context ) {
return value ? toRupiah ( value , { useUnit : 'jt' } ) : 0
}
}
}
} }
chartData = { PROJECT _VALUE _PER _DIVISION ? {
chartData = { PROJECT _VALUE _PER _DIVISION ? {
// labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
labels : PROJECT _VALUE _PER _DIVISION ? PROJECT _VALUE _PER _DIVISION . map ( ( item , idx ) => item . name ) : [ ] ,
datasets : [
@ -656,46 +658,46 @@ const DashboardBOD = () => {
< div style = { { position : 'relative' , height : '25vh' , margin : 'auto' , paddingBottom : 10 , justifyContent : 'center' } } >
{ READY _PROJECT _BY _PHASE ?
PROJECT _BY _PHASE && PROJECT _BY _PHASE . length > 0 ?
< Bar
options = { {
indexAxis : 'y' ,
elements : {
bar : {
borderWidth : 2 ,
} ,
} ,
responsive : true ,
maintainAspectRatio : false ,
plugins : {
legend : {
display : false ,
< Bar
options = { {
indexAxis : 'y' ,
elements : {
bar : {
borderWidth : 2 ,
} ,
} ,
datalabels : {
color : '#FFFFFF'
responsive : true ,
maintainAspectRatio : false ,
plugins : {
legend : {
display : false ,
} ,
datalabels : {
color : '#FFFFFF'
}
}
}
} }
data = { {
// labels: ["Initiation", "Planning", "Execution", "Control Monitoring", "Close"],
labels : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . name ) : [ ] ,
datasets : [
{
label : "" ,
// data: [3, 1, 2, 3, 7],
// borderColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
// backgroundColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
data : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . totalProject ) : [ ] ,
borderColor : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . color ) : [ ] ,
backgroundColor : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . color ) : [ ] ,
borderWidth : 2 ,
borderRadius : 5 ,
borderSkipped : false
} ,
] ,
} }
/ >
:
< NoDataChart / >
} }
data = { {
// labels: ["Initiation", "Planning", "Execution", "Control Monitoring", "Close"],
labels : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . name ) : [ ] ,
datasets : [
{
label : "" ,
// data: [3, 1, 2, 3, 7],
// borderColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
// backgroundColor: ["#F74B25", "#B5179E", "#7209B7", "#023E8A", "#3B009A"],
data : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . totalProject ) : [ ] ,
borderColor : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . color ) : [ ] ,
backgroundColor : PROJECT _BY _PHASE ? PROJECT _BY _PHASE . map ( ( item , idx ) => item . color ) : [ ] ,
borderWidth : 2 ,
borderRadius : 5 ,
borderSkipped : false
} ,
] ,
} }
/ >
:
< NoDataChart / >
:
< ContentLoader
speed = { 2 }
@ -729,77 +731,84 @@ const DashboardBOD = () => {
< / d i v >
< / d i v >
< div style = { { position : 'relative' , height : '20vh' , margin : 'auto' , paddingBottom : 10 , justifyContent : 'center' } } >
{ READY _PROJECT _INVOICE _VS _CASH _IN ?
{ READY _PROJECT _INVOICE _VS _CASH _IN ?
PROJECT _INVOICE _VS _CASH _IN ?
< Bar
options = { {
elements : {
bar : {
borderWidth : 2 ,
< Bar
options = { {
elements : {
bar : {
borderWidth : 2 ,
} ,
} ,
} ,
indexAxis : 'x' ,
responsive : true ,
maintainAspectRatio : false ,
scales : {
x : {
ticks : {
font : {
size : 9 ,
} ,
}
}
} ,
plugins : {
legend : {
display : true ,
position : 'right' ,
labels : {
boxWidth : 10
}
indexAxis : 'x' ,
responsive : true ,
maintainAspectRatio : false ,
scales : {
x : {
ticks : {
font : {
size : 9 ,
} ,
}
} ,
y : {
ticks : {
callback : function ( value ) {
return toRupiah ( value , { useUnit : 'jt' } ) ;
}
}
} ,
} ,
datalabels : {
color : '#FFFFFF' ,
// rotation: -90
formatter : function ( value , context ) {
return value ? toRupiah ( value , { useUnit : 'jt' } ) : 0
plugins : {
legend : {
display : true ,
position : 'right' ,
labels : {
boxWidth : 10
}
} ,
datalabels : {
color : '#FFFFFF' ,
// rotation: -90
formatter : function ( value , context ) {
return value ? toRupiah ( value , { useUnit : 'jt' } ) : 0
}
}
}
}
} }
data = { {
// labels: ["Gedung Tenaga Panel Surya", "Pembangunan Gedung Tower ABC", "Tower Jaringan Jawa Barat", "Tower Jaringan Jawa Timur", "Tower Jaringan Jawa Tengah", "Tower Jaringan Bali", "Project Tower ABC", "Tower Jaringan DKI Jakarta", "Tower Jaringan NTT"],
// labels: [["Gedung Tenaga", "Panel Surya"], ["Pembangunan Gedung", "Tower ABC"], ["Tower Jaringan", "Jawa Barat"], ["Tower Jaringan", "Jawa Timur"], ["Tower Jaringan", "Jawa Tengah"], "Tower Jaringan Bali", "Project Tower ABC", ["Tower Jaringan", "DKI Jakarta"], "Tower Jaringan NTT"],
labels : PROJECT _INVOICE _VS _CASH _IN ? PROJECT _INVOICE _VS _CASH _IN . map ( ( item , idx ) => item . project ) : [ ] ,
datasets : [
{
label : "Invoiced" ,
// data: [16, 8, 12, 10, 13, 12, 10, 10, 8],
data : PROJECT _INVOICE _VS _CASH _IN ? PROJECT _INVOICE _VS _CASH _IN . map ( ( item , idx ) => item . invoiced ) : [ ] ,
borderColor : '#A36A16' ,
backgroundColor : '#A36A16' ,
// borderWidth: 2,
borderRadius : 5 ,
borderSkipped : false
} ,
{
label : "Cash In" ,
// data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5],
data : PROJECT _INVOICE _VS _CASH _IN ? PROJECT _INVOICE _VS _CASH _IN . map ( ( item , idx ) => item . paid ) : [ ] ,
borderColor : '#4C4747' ,
backgroundColor : '#4C4747' ,
// borderWidth: 2,
borderRadius : 5 ,
borderSkipped : false
}
] ,
} }
/ >
:
< NoDataChart / >
} }
data = { {
// labels: ["Gedung Tenaga Panel Surya", "Pembangunan Gedung Tower ABC", "Tower Jaringan Jawa Barat", "Tower Jaringan Jawa Timur", "Tower Jaringan Jawa Tengah", "Tower Jaringan Bali", "Project Tower ABC", "Tower Jaringan DKI Jakarta", "Tower Jaringan NTT"],
// labels: [["Gedung Tenaga", "Panel Surya"], ["Pembangunan Gedung", "Tower ABC"], ["Tower Jaringan", "Jawa Barat"], ["Tower Jaringan", "Jawa Timur"], ["Tower Jaringan", "Jawa Tengah"], "Tower Jaringan Bali", "Project Tower ABC", ["Tower Jaringan", "DKI Jakarta"], "Tower Jaringan NTT"],
labels : PROJECT _INVOICE _VS _CASH _IN ? PROJECT _INVOICE _VS _CASH _IN . map ( ( item , idx ) => item . project ) : [ ] ,
datasets : [
{
label : "Invoiced" ,
// data: [16, 8, 12, 10, 13, 12, 10, 10, 8],
data : PROJECT _INVOICE _VS _CASH _IN ? PROJECT _INVOICE _VS _CASH _IN . map ( ( item , idx ) => item . invoiced ) : [ ] ,
borderColor : '#A36A16' ,
backgroundColor : '#A36A16' ,
// borderWidth: 2,
borderRadius : 5 ,
borderSkipped : false
} ,
{
label : "Cash In" ,
// data: [1, 1, 7, 6, 10, 9.5, 8, 9, 7.5],
data : PROJECT _INVOICE _VS _CASH _IN ? PROJECT _INVOICE _VS _CASH _IN . map ( ( item , idx ) => item . paid ) : [ ] ,
borderColor : '#4C4747' ,
backgroundColor : '#4C4747' ,
// borderWidth: 2,
borderRadius : 5 ,
borderSkipped : false
}
] ,
} }
/ >
:
< NoDataChart / >
:
< ContentLoaderChart type = "vertical-bar" / >
}
}
< / d i v >
< / d i v >
< / C o l >
@ -813,7 +822,7 @@ const DashboardBOD = () => {
mode = { healthPerDivisionMode }
changeMode = { ( mode ) => setHealthPerDivisionMode ( mode ) }
chartType = "vertical-bar"
chartData = { PROJECT _SCHEDULE _HEALTH _PER _DIVISION || PROJECT _BUDGET _HEALTH _PER _DIVISION ? {
chartData = { PROJECT _SCHEDULE _HEALTH _PER _DIVISION || PROJECT _BUDGET _HEALTH _PER _DIVISION ? {
// labels: ['Telecommunication Solution Service', 'Telecommunication Solution Product', 'Energy Solution', 'Constructions'],
// labels: [['Telecommunication', 'Solution Service'], ['Telecommunication', 'Solution Product'], 'Energy Solution', 'Constructions'],
labels :