Muhammad Sulaiman Yusuf
2 years ago
19 changed files with 260 additions and 2163 deletions
@ -0,0 +1,20 @@ |
|||||||
|
import React, { useEffect, useState } from 'react'; |
||||||
|
import axios from 'axios' |
||||||
|
|
||||||
|
const DashboardPMO = () => { |
||||||
|
const token = localStorage.getItem("token") |
||||||
|
const HEADER = { |
||||||
|
headers: { |
||||||
|
"Content-Type": "application/json", |
||||||
|
"Authorization": `Bearer ${token}` |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div></div> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default DashboardPMO; |
||||||
@ -1,128 +0,0 @@ |
|||||||
.number-asset { |
|
||||||
font-size: 50px; |
|
||||||
font-weight: bold; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.text-bold { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.view-rectangle { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
width: 100%; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.view1 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
margin-bottom: -20px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #008B8B; |
|
||||||
} |
|
||||||
|
|
||||||
.view2 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #8B008B; |
|
||||||
} |
|
||||||
|
|
||||||
.view3 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #7CFC00; |
|
||||||
} |
|
||||||
|
|
||||||
.view4 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #FF0000; |
|
||||||
} |
|
||||||
|
|
||||||
.view5 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #4682B4; |
|
||||||
} |
|
||||||
|
|
||||||
.number-style { |
|
||||||
font-size: 30px; |
|
||||||
color: black; |
|
||||||
font-weight: bold; |
|
||||||
margin-bottom:15px; |
|
||||||
} |
|
||||||
|
|
||||||
.number-style1 { |
|
||||||
font-size: 30px; |
|
||||||
color: #FFFFFF; |
|
||||||
font-weight: bold; |
|
||||||
margin-bottom:15px; |
|
||||||
} |
|
||||||
|
|
||||||
.daily-info-card { |
|
||||||
min-width: 130px; |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
margin: 4px; |
|
||||||
border-radius: 8px; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.dashboard-container { |
|
||||||
overflow-x: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-window-button-container { |
|
||||||
float: right; |
|
||||||
right: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-close, .maptable-maximize, .maptable-minimize { |
|
||||||
cursor: pointer; |
|
||||||
padding: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-header { |
|
||||||
margin-bottom: -10px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-title { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: 700; |
|
||||||
text-align: left; |
|
||||||
margin-left: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-close:hover, .maptable-maximize:hover, .maptable-minimize:hover { |
|
||||||
color: #20a8d8; |
|
||||||
} |
|
||||||
@ -1,41 +0,0 @@ |
|||||||
import React, { useState, useEffect } from 'react'; |
|
||||||
import ReactDOM from 'react-dom'; |
|
||||||
import { Pie } from '@ant-design/plots'; |
|
||||||
|
|
||||||
const PieChart = () => { |
|
||||||
const data = [ |
|
||||||
{ |
|
||||||
type: 'FTTH', |
|
||||||
value: 27, |
|
||||||
}, |
|
||||||
{ |
|
||||||
type: 'Konstruksi', |
|
||||||
value: 25, |
|
||||||
}, |
|
||||||
]; |
|
||||||
const config = { |
|
||||||
appendPadding: 10, |
|
||||||
data, |
|
||||||
angleField: 'value', |
|
||||||
colorField: 'type', |
|
||||||
radius: 0.9, |
|
||||||
label: { |
|
||||||
type: 'inner', |
|
||||||
offset: '-30%', |
|
||||||
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`, |
|
||||||
style: { |
|
||||||
fontSize: 14, |
|
||||||
textAlign: 'center', |
|
||||||
}, |
|
||||||
}, |
|
||||||
interactions: [ |
|
||||||
{ |
|
||||||
type: 'element-active', |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
return <Pie {...config} />; |
|
||||||
}; |
|
||||||
|
|
||||||
export default PieChart; |
|
||||||
@ -1,106 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Doughnut, Bar } from 'react-chartjs-2'; |
|
||||||
import faker from '@faker-js/faker'; |
|
||||||
|
|
||||||
export const optionsDoughnut = { |
|
||||||
title: { |
|
||||||
display: true, |
|
||||||
text: 'PROJECT BY TYPE' |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
export const data = { |
|
||||||
labels: ['Manned guarding ', 'C&T', 'CMS ', 'ESS', 'RSO'], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: '# of Votes', |
|
||||||
data: [12, 19, 3, 5, 2], |
|
||||||
backgroundColor: [ |
|
||||||
'rgba(255, 99, 132, 0.2)', |
|
||||||
'rgba(54, 162, 235, 0.2)', |
|
||||||
'rgba(255, 206, 86, 0.2)', |
|
||||||
'rgba(75, 192, 192, 0.2)', |
|
||||||
'rgba(153, 102, 255, 0.2)', |
|
||||||
// 'rgba(255, 159, 64, 0.2)',
|
|
||||||
], |
|
||||||
borderColor: [ |
|
||||||
'rgba(255, 99, 132, 1)', |
|
||||||
'rgba(54, 162, 235, 1)', |
|
||||||
'rgba(255, 206, 86, 1)', |
|
||||||
'rgba(75, 192, 192, 1)', |
|
||||||
'rgba(153, 102, 255, 1)', |
|
||||||
// 'rgba(255, 159, 64, 1)',
|
|
||||||
], |
|
||||||
borderWidth: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
export const DoughnutChart = () => { |
|
||||||
return <Doughnut data={data} options={optionsDoughnut} />; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
export const options = { |
|
||||||
title: { |
|
||||||
display: true, |
|
||||||
text: 'PROJECT BY GOVERNANCE PHASE' |
|
||||||
}, |
|
||||||
legend: { |
|
||||||
position: 'right', |
|
||||||
}, |
|
||||||
responsive: true, |
|
||||||
scales: { |
|
||||||
yAxes: [{ |
|
||||||
display: true, |
|
||||||
|
|
||||||
// position: 'right',
|
|
||||||
stacked: true, |
|
||||||
}], |
|
||||||
xAxes: [{ |
|
||||||
display: true, |
|
||||||
// position: 'right',
|
|
||||||
stacked: true, |
|
||||||
}], |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
const labels = ['']; |
|
||||||
|
|
||||||
export const dataBar = { |
|
||||||
labels, |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
indexAxis: 'y', |
|
||||||
label: 'Initiation', |
|
||||||
data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })), |
|
||||||
backgroundColor: 'rgb(255, 99, 132)', |
|
||||||
}, |
|
||||||
{ |
|
||||||
indexAxis: 'y', |
|
||||||
label: 'Execution', |
|
||||||
data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })), |
|
||||||
backgroundColor: 'rgb(75, 192, 192)', |
|
||||||
}, |
|
||||||
{ |
|
||||||
indexAxis: 'y', |
|
||||||
label: 'Closing', |
|
||||||
data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })), |
|
||||||
backgroundColor: 'rgb(53, 162, 235)', |
|
||||||
}, |
|
||||||
// {
|
|
||||||
// indexAxis: 'y',
|
|
||||||
// label: 'Excecution',
|
|
||||||
// data: labels.map(() => faker.datatype.number({ min: 0, max: 10 })),
|
|
||||||
// backgroundColor: 'rgba(255, 159, 64, 1)',
|
|
||||||
// },
|
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
export function BarChart() { |
|
||||||
return <Bar indexAxis='y' options={options} data={dataBar} />; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,130 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Table, Tag, Space } from 'antd'; |
|
||||||
|
|
||||||
const columns = [ |
|
||||||
{ |
|
||||||
title: 'Project Name', |
|
||||||
dataIndex: 'project', |
|
||||||
key: 'project', |
|
||||||
fixed: 'left', |
|
||||||
width: 200, |
|
||||||
// render: text => <a>{text}</a>,
|
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Project Owner', |
|
||||||
dataIndex: 'owner', |
|
||||||
key: 'owner', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Start Date', |
|
||||||
dataIndex: 'startDate', |
|
||||||
key: 'startDate', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'End Date', |
|
||||||
dataIndex: 'endDate', |
|
||||||
key: 'endDate', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Cost', |
|
||||||
dataIndex: 'cost', |
|
||||||
key: 'cost', |
|
||||||
render: text => `Rp. ${text.toLocaleString()}`, |
|
||||||
align: 'right' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Cost Health', |
|
||||||
dataIndex: 'costHealth', |
|
||||||
key: 'costHealth', |
|
||||||
render: text => |
|
||||||
text === 'good' ? <div className='health-status-good' /> : |
|
||||||
text === 'danger' ? <div className='health-status-danger' /> : |
|
||||||
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' /> |
|
||||||
, |
|
||||||
align: 'center', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Work Health', |
|
||||||
dataIndex: 'workHealth', |
|
||||||
key: 'workHealth', |
|
||||||
render: text => |
|
||||||
text === 'good' ? <div className='health-status-good' /> : |
|
||||||
text === 'danger' ? <div className='health-status-danger' /> : |
|
||||||
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />, |
|
||||||
align: 'center', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Schedule Health', |
|
||||||
dataIndex: 'scheduleHealth', |
|
||||||
key: 'scheduleHealth', |
|
||||||
render: text => |
|
||||||
text === 'good' ? <div className='health-status-good' /> : |
|
||||||
text === 'danger' ? <div className='health-status-danger' /> : |
|
||||||
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />, |
|
||||||
align: 'center', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '% Complete', |
|
||||||
dataIndex: 'complete', |
|
||||||
key: 'complete', |
|
||||||
render: text => `${text}%`, |
|
||||||
align: 'right' |
|
||||||
}, |
|
||||||
// {
|
|
||||||
// title: 'Action',
|
|
||||||
// key: 'action',
|
|
||||||
// render: (text, record) => (
|
|
||||||
// <Space size="middle">
|
|
||||||
// <a>Invite {record.name}</a>
|
|
||||||
// <a>Delete</a>
|
|
||||||
// </Space>
|
|
||||||
// ),
|
|
||||||
// },
|
|
||||||
]; |
|
||||||
|
|
||||||
const data = [ |
|
||||||
{ |
|
||||||
key: '1', |
|
||||||
project: 'Bay Plaza', |
|
||||||
owner: 'John Brown', |
|
||||||
startDate: '1/22/2022', |
|
||||||
endDate: '1/22/2023', |
|
||||||
complete: 20, |
|
||||||
cost: 40000000, |
|
||||||
costHealth: 'good', |
|
||||||
workHealth: 'default', |
|
||||||
scheduleHealth: 'warning' |
|
||||||
}, |
|
||||||
{ |
|
||||||
key: '2', |
|
||||||
project: 'Jambi Bridge', |
|
||||||
owner: 'Jim Green', |
|
||||||
startDate: '4/22/2022', |
|
||||||
endDate: '11/22/2023', |
|
||||||
complete: 65, |
|
||||||
cost: 20000000, |
|
||||||
costHealth: 'good', |
|
||||||
workHealth: 'default', |
|
||||||
scheduleHealth: 'danger' |
|
||||||
}, |
|
||||||
{ |
|
||||||
key: '3', |
|
||||||
project: 'Banten International Airport', |
|
||||||
owner: 'Joe Black', |
|
||||||
startDate: '1/22/2022', |
|
||||||
endDate: '1/22/2025', |
|
||||||
complete: 50, |
|
||||||
cost: 200000000, |
|
||||||
costHealth: 'default', |
|
||||||
workHealth: 'default', |
|
||||||
scheduleHealth: 'default' |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
const TableDashboard = () => { |
|
||||||
return ( |
|
||||||
<Table size="small" columns={columns} dataSource={data} scroll={{ x: 1300, y: 300 }} /> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default TableDashboard; |
|
||||||
@ -1,44 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Doughnut } from 'react-chartjs-2'; |
|
||||||
|
|
||||||
const options = { |
|
||||||
title: { |
|
||||||
display: true, |
|
||||||
text: 'PROJECT BY TYPE' |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
export const ProjectTypeChart = ({ projectTypes, projectsByType }) => { |
|
||||||
let total = [] |
|
||||||
|
|
||||||
for (var j = 0; j < projectTypes.length; j++) { |
|
||||||
total.push(projectsByType[j].total) |
|
||||||
} |
|
||||||
|
|
||||||
let dataSets = [{ |
|
||||||
label: "#", |
|
||||||
data: total, |
|
||||||
backgroundColor: [ |
|
||||||
'rgba(255, 99, 132, 0.2)', |
|
||||||
'rgba(54, 162, 235, 0.2)', |
|
||||||
'rgba(255, 206, 86, 0.2)', |
|
||||||
'rgba(75, 192, 192, 0.2)', |
|
||||||
], |
|
||||||
borderColor: [ |
|
||||||
'rgba(255, 99, 132, 1)', |
|
||||||
'rgba(54, 162, 235, 1)', |
|
||||||
'rgba(255, 206, 86, 1)', |
|
||||||
'rgba(75, 192, 192, 1)', |
|
||||||
'rgba(153, 102, 255, 1)', |
|
||||||
], |
|
||||||
borderWidth: 1, |
|
||||||
}] |
|
||||||
|
|
||||||
const data = { |
|
||||||
labels: projectTypes, |
|
||||||
datasets: dataSets, |
|
||||||
}; |
|
||||||
|
|
||||||
return <Doughnut data={data} options={options} />; |
|
||||||
} |
|
||||||
|
|
||||||
@ -1,181 +0,0 @@ |
|||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import { Row, Col, Collapse } from 'antd'; |
|
||||||
import TableDashboardV1 from './tableDashboardv1'; |
|
||||||
import { ProjectTypeChart } from './chartDashboard'; |
|
||||||
import { ProjectPhaseChart } from './projectPhaseChart'; |
|
||||||
import ProjectMap from './projectMap'; |
|
||||||
import axios from 'axios' |
|
||||||
import { BASE_OSPRO } from '../../const/ApiConst'; |
|
||||||
import { formatRibuanDecimal } from '../../const/CustomFunc.js'; |
|
||||||
|
|
||||||
const { Panel } = Collapse; |
|
||||||
|
|
||||||
function BoxDashboardNoIcon({ value, title, secondaryTitle, bgColor, valFSize = '1.0rem', fSize = '0.7rem' }) { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<div style={{ backgroundColor: bgColor, height: 60 }} class='box-dashboard-pm'> |
|
||||||
<Row> |
|
||||||
<Col span={24}> |
|
||||||
<div class='box-content'> |
|
||||||
<div style={{ fontSize: valFSize }} class='text-box'>{value}</div> |
|
||||||
<div style={{ fontSize: fSize }} class='text-box'>{title}</div> |
|
||||||
<div style={{ fontSize: '0.6rem' }} class='text-box-secondary'>{secondaryTitle && secondaryTitle.toUpperCase()}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const DashboardPM = () => { |
|
||||||
const [PROJECTCOUNT, SET_PROJECTCOUNT] = useState(0) |
|
||||||
const [PROJECTBUDGETTOTAL, SET_PROJECTBUDGETTOTAL] = useState(0) |
|
||||||
const [PROJECTMANPOWER, SET_PROJETMANPOWER] = useState(0) |
|
||||||
const [PROJECTACTUALCOSTTOTAL, SET_PROJECTACTUALCOSTTOTAL] = useState(0) |
|
||||||
const [PROJECTCOSTTOTAL, SET_PROJECTCOSTTOTAL] = useState(0) |
|
||||||
const [TOTALREVENUE, SET_TOTALREVENUE] = useState(0) |
|
||||||
const [MANPOWERS, SET_MANPOWERS] = useState(0) |
|
||||||
const [PROJECTPHASES, SET_PROJECTPHASES] = useState([]) |
|
||||||
const [PROJECTSBYPHASE, SET_PROJECTSBYPHASE] = useState([]) |
|
||||||
const [PROJECTSONDANGER, SET_PROJECTSONDANGER] = useState(0) |
|
||||||
const [PROJECTLOCATIONS, SET_PROJECTLOCATIONS] = useState([]) |
|
||||||
|
|
||||||
const [PROJECTTYPES, SET_PROJECTTYPES] = useState([]) |
|
||||||
const [PROJECTSBYTYPE, SET_PROJECTSBYTYPE] = useState([]) |
|
||||||
|
|
||||||
const token = localStorage.getItem("token") |
|
||||||
const HEADER = { |
|
||||||
headers: { |
|
||||||
"Content-Type": "application/json", |
|
||||||
"Authorization": `Bearer ${token}` |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const getProjectInfos = async () => { |
|
||||||
const URL = `${BASE_OSPRO}/api/project/list` |
|
||||||
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
||||||
let markers = [] |
|
||||||
|
|
||||||
SET_PROJECTCOUNT(result.data.totalRecord) |
|
||||||
result.data.totalActualCost != undefined ? SET_PROJECTCOSTTOTAL(result.data.totalActualCost) : SET_PROJECTCOSTTOTAL(0) |
|
||||||
result.data.totalPlannedCost != undefined ? SET_PROJECTBUDGETTOTAL(result.data.totalPlannedCost) : SET_PROJECTBUDGETTOTAL(0) |
|
||||||
result.data.totalRevenue != undefined ? SET_TOTALREVENUE(result.data.totalRevenue) : SET_TOTALREVENUE(0) |
|
||||||
result.data.manpowers != undefined ? SET_MANPOWERS(result.data.manpowers) : SET_MANPOWERS(0) |
|
||||||
result.data.projectPhases != undefined ? SET_PROJECTPHASES(result.data.projectPhases) : SET_PROJECTPHASES([]) |
|
||||||
result.data.projectsByPhase != undefined ? SET_PROJECTSBYPHASE(result.data.projectsByPhase) : SET_PROJECTSBYPHASE([]) |
|
||||||
result.data.projectTypes != undefined ? SET_PROJECTTYPES(result.data.projectTypes) : SET_PROJECTTYPES([]) |
|
||||||
result.data.projectsByType != undefined ? SET_PROJECTSBYTYPE(result.data.projectsByType) : SET_PROJECTSBYTYPE([]) |
|
||||||
result.data.projectsOnDanger != undefined ? SET_PROJECTSONDANGER(result.data.projectsOnDanger) : SET_PROJECTSONDANGER(0) |
|
||||||
|
|
||||||
for (let i = 0; i < result.data.totalRecord; i++) { |
|
||||||
if (typeof (result.data.data[i].geolocation) == 'object' && result.data.data[i].geolocation.length > 0) { |
|
||||||
markers.push({ |
|
||||||
lat: result.data.data[i].geolocation[0].lat, |
|
||||||
lon: result.data.data[i].geolocation[0].lon, |
|
||||||
label: result.data.data[i].area_kerja + "\n" + result.data.data[i].nama |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
SET_PROJECTLOCATIONS(markers) |
|
||||||
} |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
getProjectInfos(); |
|
||||||
}, []) |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<div> |
|
||||||
<Row |
|
||||||
gutter={{ |
|
||||||
xs: 8, |
|
||||||
sm: 16, |
|
||||||
md: 24, |
|
||||||
lg: 32, |
|
||||||
}} |
|
||||||
> |
|
||||||
<Col span={2} style={{ margin: '' }}> |
|
||||||
<BoxDashboardNoIcon |
|
||||||
value={PROJECTCOUNT} |
|
||||||
bgColor="#0287c7" |
|
||||||
title="Projects" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col span={3} style={{ margin: '' }}> |
|
||||||
<BoxDashboardNoIcon |
|
||||||
value={PROJECTSONDANGER} |
|
||||||
bgColor="#f51d1d" |
|
||||||
title="Projects on Danger" |
|
||||||
fSize="0.7rem" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col span={5} style={{ margin: '' }}> |
|
||||||
<BoxDashboardNoIcon |
|
||||||
value={`${formatRibuanDecimal(PROJECTBUDGETTOTAL)}`} |
|
||||||
bgColor="#cf6102" |
|
||||||
title="Budget" |
|
||||||
valFSize="1rem" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col span={5} style={{ margin: '' }}> |
|
||||||
<BoxDashboardNoIcon |
|
||||||
value={`${formatRibuanDecimal(PROJECTCOSTTOTAL)}`} |
|
||||||
bgColor="#f51d1d" |
|
||||||
title="Project Expanditure" |
|
||||||
valFSize="1rem" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col span={5} style={{ margin: '' }}> |
|
||||||
<BoxDashboardNoIcon |
|
||||||
value={`${formatRibuanDecimal(TOTALREVENUE)}`} |
|
||||||
bgColor="#077857" |
|
||||||
title="Revenue" |
|
||||||
valFSize="1rem" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col span={2} style={{ margin: '' }}> |
|
||||||
<BoxDashboardNoIcon |
|
||||||
value={MANPOWERS} |
|
||||||
bgColor="#0287c7" |
|
||||||
title="Manpower" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col span={2} style={{ margin: '' }}> |
|
||||||
<BoxDashboardNoIcon |
|
||||||
value={<i style={{ color: '#fff' }} class="zmdi zmdi-truck zmdi-hc-2x"></i>} |
|
||||||
bgColor="#0287c7" |
|
||||||
title="OSLOG" |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ marginTop: '15px' }}> |
|
||||||
<Col span={24} style={{ margin: '0px 0px 0px 0px' }}> |
|
||||||
<Collapse> |
|
||||||
<Panel header="More Information" key="1"> |
|
||||||
<Row style={{ margin: '10px 10px 0px 10px' }}> |
|
||||||
<Col span={8} > |
|
||||||
<ProjectMap markers={PROJECTLOCATIONS} /> |
|
||||||
</Col> |
|
||||||
<Col span={8}> |
|
||||||
<ProjectPhaseChart projectPhases={PROJECTPHASES} projectsByPhase={PROJECTSBYPHASE} /> |
|
||||||
</Col> |
|
||||||
<Col span={8}> |
|
||||||
<ProjectTypeChart projectTypes={PROJECTTYPES} projectsByType={PROJECTSBYTYPE} /> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</Panel> |
|
||||||
</Collapse> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
<Row style={{ marginTop: '15px' }}> |
|
||||||
<Col span={24}> |
|
||||||
<TableDashboardV1 /> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default DashboardPM; |
|
||||||
@ -1,40 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import icon from 'leaflet/dist/images/marker-icon.png'; |
|
||||||
import iconShadow from 'leaflet/dist/images/marker-shadow.png'; |
|
||||||
import L from 'leaflet'; |
|
||||||
import { MapContainer, Marker, TileLayer, Popup } from 'react-leaflet' |
|
||||||
import 'leaflet/dist/leaflet.css'; |
|
||||||
|
|
||||||
const defaultMapPosition = [-6.1753924, 106.8271528] |
|
||||||
|
|
||||||
const DefaultIcon = L.icon({ |
|
||||||
iconUrl: icon, |
|
||||||
shadowUrl: iconShadow, |
|
||||||
iconSize: [15, 25], |
|
||||||
shadowSize: [0, 0], |
|
||||||
}); |
|
||||||
L.Marker.prototype.options.icon = DefaultIcon; |
|
||||||
|
|
||||||
const ProjectMap = ({ markers }) => { |
|
||||||
return ( |
|
||||||
<MapContainer |
|
||||||
center={defaultMapPosition} |
|
||||||
zoom={5} |
|
||||||
> |
|
||||||
<TileLayer |
|
||||||
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' |
|
||||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" |
|
||||||
/> |
|
||||||
{markers.map(({ lat, lon, label }) => ( |
|
||||||
<Marker position={[lat, lon]}> |
|
||||||
<Popup> |
|
||||||
{label} |
|
||||||
</Popup> |
|
||||||
</Marker> |
|
||||||
))} |
|
||||||
</MapContainer> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default ProjectMap; |
|
||||||
@ -1,37 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { HorizontalBar } from 'react-chartjs-2'; |
|
||||||
|
|
||||||
const options = { |
|
||||||
responsive: true, |
|
||||||
title: { |
|
||||||
display: true, |
|
||||||
text: 'PROJECT BY PHASE' |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
export const ProjectPhaseChart = ({ projectPhases, projectsByPhase }) => { |
|
||||||
let dataSets = [] |
|
||||||
let total = [] |
|
||||||
|
|
||||||
for (var i = 0; i < projectsByPhase.length; i++) { |
|
||||||
total = [] |
|
||||||
for (var j = 0; j < projectPhases.length; j++) { |
|
||||||
if (projectPhases[j] != projectsByPhase[i].name) { |
|
||||||
total.push(0) |
|
||||||
} else { |
|
||||||
total.push(projectsByPhase[i].total) |
|
||||||
} |
|
||||||
} |
|
||||||
dataSets.push({ |
|
||||||
label: projectsByPhase[i].name, |
|
||||||
data: total, |
|
||||||
backgroundColor: projectsByPhase[i].color, |
|
||||||
borderColor: '#000000', |
|
||||||
}); |
|
||||||
} |
|
||||||
const data = { |
|
||||||
datasets: dataSets, |
|
||||||
labels: projectPhases, |
|
||||||
}; |
|
||||||
return <HorizontalBar options={options} data={data} />; |
|
||||||
} |
|
||||||
@ -1,130 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Table, Tag, Space } from 'antd'; |
|
||||||
|
|
||||||
const columns = [ |
|
||||||
{ |
|
||||||
title: 'Project Name', |
|
||||||
dataIndex: 'project', |
|
||||||
key: 'project', |
|
||||||
fixed: 'left', |
|
||||||
width: 200, |
|
||||||
render: text => <a>{text}</a>, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Project Owner', |
|
||||||
dataIndex: 'owner', |
|
||||||
key: 'owner', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Start Date', |
|
||||||
dataIndex: 'startDate', |
|
||||||
key: 'startDate', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'End Date', |
|
||||||
dataIndex: 'endDate', |
|
||||||
key: 'endDate', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Cost', |
|
||||||
dataIndex: 'cost', |
|
||||||
key: 'cost', |
|
||||||
render: text => `Rp. ${text.toLocaleString()}`, |
|
||||||
align: 'right' |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Cost Health', |
|
||||||
dataIndex: 'costHealth', |
|
||||||
key: 'costHealth', |
|
||||||
render: text => |
|
||||||
text === 'good' ? <div className='health-status-good' /> : |
|
||||||
text === 'danger' ? <div className='health-status-danger' /> : |
|
||||||
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' /> |
|
||||||
, |
|
||||||
align: 'center', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Work Health', |
|
||||||
dataIndex: 'workHealth', |
|
||||||
key: 'workHealth', |
|
||||||
render: text => |
|
||||||
text === 'good' ? <div className='health-status-good' /> : |
|
||||||
text === 'danger' ? <div className='health-status-danger' /> : |
|
||||||
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />, |
|
||||||
align: 'center', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Schedule Health', |
|
||||||
dataIndex: 'scheduleHealth', |
|
||||||
key: 'scheduleHealth', |
|
||||||
render: text => |
|
||||||
text === 'good' ? <div className='health-status-good' /> : |
|
||||||
text === 'danger' ? <div className='health-status-danger' /> : |
|
||||||
text === 'warning' ? <div className='health-status-warning' /> : <div className='health-status-default' />, |
|
||||||
align: 'center', |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: '% Complete', |
|
||||||
dataIndex: 'complete', |
|
||||||
key: 'complete', |
|
||||||
render: text => `${text}%`, |
|
||||||
align: 'right' |
|
||||||
}, |
|
||||||
// {
|
|
||||||
// title: 'Action',
|
|
||||||
// key: 'action',
|
|
||||||
// render: (text, record) => (
|
|
||||||
// <Space size="middle">
|
|
||||||
// <a>Invite {record.name}</a>
|
|
||||||
// <a>Delete</a>
|
|
||||||
// </Space>
|
|
||||||
// ),
|
|
||||||
// },
|
|
||||||
]; |
|
||||||
|
|
||||||
const data = [ |
|
||||||
{ |
|
||||||
key: '1', |
|
||||||
project: 'Bay Plaza', |
|
||||||
owner: 'John Brown', |
|
||||||
startDate: '1/22/2022', |
|
||||||
endDate: '1/22/2023', |
|
||||||
complete: 20, |
|
||||||
cost: 40000000, |
|
||||||
costHealth: 'good', |
|
||||||
workHealth: 'default', |
|
||||||
scheduleHealth: 'warning' |
|
||||||
}, |
|
||||||
{ |
|
||||||
key: '2', |
|
||||||
project: 'Jambi Bridge', |
|
||||||
owner: 'Jim Green', |
|
||||||
startDate: '4/22/2022', |
|
||||||
endDate: '11/22/2023', |
|
||||||
complete: 65, |
|
||||||
cost: 20000000, |
|
||||||
costHealth: 'good', |
|
||||||
workHealth: 'default', |
|
||||||
scheduleHealth: 'danger' |
|
||||||
}, |
|
||||||
{ |
|
||||||
key: '3', |
|
||||||
project: 'Banten International Airport', |
|
||||||
owner: 'Joe Black', |
|
||||||
startDate: '1/22/2022', |
|
||||||
endDate: '1/22/2025', |
|
||||||
complete: 50, |
|
||||||
cost: 200000000, |
|
||||||
costHealth: 'default', |
|
||||||
workHealth: 'default', |
|
||||||
scheduleHealth: 'default' |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
const TableDashboard = () => { |
|
||||||
return ( |
|
||||||
<Table size="small" columns={columns} dataSource={data} scroll={{ x: 1300, y: 300 }} /> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default TableDashboard; |
|
||||||
@ -1,376 +0,0 @@ |
|||||||
import '../../../node_modules/react-grid-layout/css/styles.css'; |
|
||||||
import '../../../node_modules/react-resizable/css/styles.css'; |
|
||||||
import './../DashboardPMO/Dashboard.css'; |
|
||||||
import { BASE_OSPRO } from '../../const/ApiConst'; |
|
||||||
import React, { useEffect, useState, useRef } from 'react'; |
|
||||||
import axios from 'axios' |
|
||||||
import { Table, Row, Col, Button, Input, InputNumber, Space } from 'antd'; |
|
||||||
import { formatRibuanDecimal } from '../../const/CustomFunc.js'; |
|
||||||
import { Badge } from 'reactstrap'; |
|
||||||
import { Link } from "react-router-dom"; |
|
||||||
import { SearchOutlined } from '@ant-design/icons'; |
|
||||||
import Highlighter from 'react-highlight-words'; |
|
||||||
import _ from "lodash"; |
|
||||||
import Slider from "antd/lib/slider"; |
|
||||||
import numeral from "numeral"; |
|
||||||
|
|
||||||
const filterData = data => formatter => data.map(item => ({ |
|
||||||
text: formatter(item), |
|
||||||
value: formatter(item) |
|
||||||
})) |
|
||||||
|
|
||||||
const TableDashboardV1 = () => { |
|
||||||
const token = localStorage.getItem("token") |
|
||||||
const HEADER = { |
|
||||||
headers: { |
|
||||||
"Content-Type": "application/json", |
|
||||||
"Authorization": `Bearer ${token}`, |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const [MANPOWERS, SET_MANPOWERS] = useState(0) |
|
||||||
const [MAXPLANNEDCOST, SET_MAXPLANNEDCOST] = useState(0) |
|
||||||
const [MAXACTUALCOST, SET_MAXACTUALCOST] = useState(0) |
|
||||||
const [MAXCOSTVARIANCE, SET_MAXCOSTVARIANCE] = useState(0) |
|
||||||
const [dataTable, setDataTable] = useState([]) |
|
||||||
const [searchText, setSearchText] = useState('') |
|
||||||
const [searchedColumn, setSearchedColumn] = useState('') |
|
||||||
const searchInput = useRef(null) |
|
||||||
|
|
||||||
const handleSearch = (selectedKeys, confirm, dataIndex) => { |
|
||||||
confirm() |
|
||||||
setSearchText(selectedKeys[0]) |
|
||||||
setSearchedColumn(dataIndex) |
|
||||||
}; |
|
||||||
|
|
||||||
const handleSlide = (dataIndex, value, confirm) => { |
|
||||||
confirm({ closeDropdown: false }); |
|
||||||
}; |
|
||||||
|
|
||||||
const slider = (dataIndex, maxSlider) => ({ |
|
||||||
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => { |
|
||||||
return ( |
|
||||||
<div |
|
||||||
className="custom-filter-dropdown ant-table-filter-dropdown" |
|
||||||
style={{ minWidth: "20rem", padding: "0.5rem 1rem" }} |
|
||||||
> |
|
||||||
<Row> |
|
||||||
<Col span={4}> |
|
||||||
<div style={{ display: "flex", flexDirection: "column" }}> |
|
||||||
<div> |
|
||||||
<strong>Min: </strong> |
|
||||||
</div> |
|
||||||
<div>0</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
<Col span={16}> |
|
||||||
<Slider |
|
||||||
range={true} |
|
||||||
min={0} |
|
||||||
max={maxSlider} |
|
||||||
defaultValue={[0, maxSlider]} |
|
||||||
onAfterChange={(value) => { |
|
||||||
setSelectedKeys([value]) |
|
||||||
handleSlide(dataIndex, value, confirm)} |
|
||||||
} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
<Col span={4}> |
|
||||||
<div style={{ display: "flex", flexDirection: "column" }}> |
|
||||||
<div> |
|
||||||
<strong>Max:</strong> |
|
||||||
</div> |
|
||||||
<div style={{ whitespace: "nowrap", overflow: "hidden" }} ellipsis={true}>{dataIndex == 'manpower' || dataIndex == 'progress' ? maxSlider : formatRibuanDecimal(maxSlider)}</div> |
|
||||||
</div> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</div> |
|
||||||
)}, |
|
||||||
onFilter: (value, record) => { |
|
||||||
return (record[dataIndex] >= value[0] && record[dataIndex] <= value[1]) |
|
||||||
}, |
|
||||||
onFilterDropdownVisibleChange: (visible) => { |
|
||||||
if (visible) { |
|
||||||
setTimeout(() => searchInput.current?.select(), 100); |
|
||||||
} |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
const handleReset = (clearFilters) => { |
|
||||||
clearFilters(); |
|
||||||
setSearchText(''); |
|
||||||
}; |
|
||||||
|
|
||||||
const getColumnSearchProps = (dataIndex) => ({ |
|
||||||
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => { |
|
||||||
return ( |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
padding: 8, |
|
||||||
}} |
|
||||||
> |
|
||||||
<Input |
|
||||||
ref={searchInput} |
|
||||||
placeholder={`Search ${dataIndex}`} |
|
||||||
value={selectedKeys[0]} |
|
||||||
onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])} |
|
||||||
onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)} |
|
||||||
style={{ |
|
||||||
marginBottom: 8, |
|
||||||
display: 'block', |
|
||||||
}} |
|
||||||
/> |
|
||||||
<Space> |
|
||||||
<Button |
|
||||||
type="primary" |
|
||||||
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)} |
|
||||||
icon={<SearchOutlined />} |
|
||||||
size="small" |
|
||||||
style={{ |
|
||||||
width: 90, |
|
||||||
}} |
|
||||||
> |
|
||||||
Search |
|
||||||
</Button> |
|
||||||
<Button |
|
||||||
onClick={() => clearFilters && handleReset(clearFilters)} |
|
||||||
size="small" |
|
||||||
style={{ |
|
||||||
width: 90, |
|
||||||
}} |
|
||||||
> |
|
||||||
Reset |
|
||||||
</Button> |
|
||||||
<Button |
|
||||||
type="link" |
|
||||||
size="small" |
|
||||||
onClick={() => { |
|
||||||
confirm({ |
|
||||||
closeDropdown: false, |
|
||||||
}); |
|
||||||
setSearchText(selectedKeys[0]); |
|
||||||
setSearchedColumn(dataIndex); |
|
||||||
}} |
|
||||||
> |
|
||||||
</Button> |
|
||||||
</Space> |
|
||||||
</div> |
|
||||||
)}, |
|
||||||
filterIcon: (filtered) => ( |
|
||||||
<SearchOutlined |
|
||||||
style={{ |
|
||||||
color: filtered ? '#1890ff' : undefined, |
|
||||||
}} |
|
||||||
/> |
|
||||||
), |
|
||||||
onFilter: (value, record) => { |
|
||||||
return record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) |
|
||||||
}, |
|
||||||
onFilterDropdownVisibleChange: (visible) => { |
|
||||||
if (visible) { |
|
||||||
setTimeout(() => searchInput.current?.select(), 100); |
|
||||||
} |
|
||||||
}, |
|
||||||
render: (text, record) => |
|
||||||
searchedColumn === dataIndex ? ( |
|
||||||
<Highlighter |
|
||||||
highlightStyle={{ |
|
||||||
backgroundColor: '#ffc069', |
|
||||||
padding: 0, |
|
||||||
}} |
|
||||||
searchWords={[searchText]} |
|
||||||
autoEscape |
|
||||||
textToHighlight={text ? text.toString() : ''} |
|
||||||
/> |
|
||||||
) : ( |
|
||||||
<> |
|
||||||
<Link to={`/dashboard-project/${record.id}/${record.lastGanttId}`}> |
|
||||||
{record.kode_sortname} <br /> {text} |
|
||||||
</Link> |
|
||||||
</> |
|
||||||
), |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
const filterDate = (dataIndex) => ({ |
|
||||||
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => { |
|
||||||
return ( |
|
||||||
<div |
|
||||||
style={{ |
|
||||||
padding: 8, |
|
||||||
}} |
|
||||||
> |
|
||||||
<InputNumber |
|
||||||
ref={searchInput} |
|
||||||
placeholder={`Year`} |
|
||||||
value={selectedKeys[0]} |
|
||||||
min={2020} |
|
||||||
max={2050} |
|
||||||
//onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
|
|
||||||
onChange={(e) => console.log(e)} |
|
||||||
style={{ |
|
||||||
marginBottom: 8, |
|
||||||
display: 'block', |
|
||||||
}} |
|
||||||
/> |
|
||||||
<Space> |
|
||||||
<Button |
|
||||||
type="primary" |
|
||||||
onClick={() => handleSearch(selectedKeys, confirm, dataIndex)} |
|
||||||
icon={<SearchOutlined />} |
|
||||||
size="small" |
|
||||||
style={{ |
|
||||||
width: 90, |
|
||||||
}} |
|
||||||
> |
|
||||||
Search |
|
||||||
</Button> |
|
||||||
<Button |
|
||||||
onClick={() => clearFilters && handleReset(clearFilters)} |
|
||||||
size="small" |
|
||||||
style={{ |
|
||||||
width: 90, |
|
||||||
}} |
|
||||||
> |
|
||||||
Reset |
|
||||||
</Button> |
|
||||||
<Button |
|
||||||
type="link" |
|
||||||
size="small" |
|
||||||
onClick={() => { |
|
||||||
confirm({ |
|
||||||
closeDropdown: false, |
|
||||||
}); |
|
||||||
setSearchText(selectedKeys[0]); |
|
||||||
setSearchedColumn(dataIndex); |
|
||||||
}} |
|
||||||
> |
|
||||||
</Button> |
|
||||||
</Space> |
|
||||||
</div> |
|
||||||
)}, |
|
||||||
onFilter: (value, record) => { |
|
||||||
return record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) |
|
||||||
}, |
|
||||||
onFilterDropdownVisibleChange: (visible) => { |
|
||||||
if (visible) { |
|
||||||
setTimeout(() => searchInput.current?.select(), 100); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
const getProjects = async () => { |
|
||||||
const URL = `${BASE_OSPRO}/api/project/list` |
|
||||||
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
||||||
|
|
||||||
if (result.data.code == 200) { |
|
||||||
setDataTable(result.data.data); |
|
||||||
result.data.manpowers != undefined ? SET_MANPOWERS(result.data.manpowers) : SET_MANPOWERS(0) |
|
||||||
SET_MAXPLANNEDCOST(Math.max(...result.data.data.map(o => o.plannedCost))) |
|
||||||
SET_MAXACTUALCOST(Math.max(...result.data.data.map(o => o.actualCost))) |
|
||||||
SET_MAXCOSTVARIANCE(Math.max(...result.data.data.map(o => o.costVariance))) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const columns = [ |
|
||||||
{ |
|
||||||
title: 'Project', |
|
||||||
dataIndex: 'nama', |
|
||||||
key: 'nama', |
|
||||||
render: (text, record) => |
|
||||||
<Link to={`/dashboard-project/${record.id}/${record.lastGanttId}`}> |
|
||||||
{record.kode_sortname} <br /> {text} |
|
||||||
</Link>, |
|
||||||
...getColumnSearchProps('nama'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Project Manager', |
|
||||||
dataIndex: 'projectManager', |
|
||||||
key: 'projectManager', |
|
||||||
filters: _.uniqWith(filterData(dataTable)(i => i.projectManager), _.isEqual), |
|
||||||
onFilter: (value, record) => record.projectManager.indexOf(value) === 0, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Planned Interval', |
|
||||||
dataIndex: 'plannedInterval', |
|
||||||
key: 'plannedInterval', |
|
||||||
...filterDate('plannedInterval'), |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Manpower', |
|
||||||
dataIndex: 'manpower', |
|
||||||
key: 'manpower', |
|
||||||
render: (text) => { |
|
||||||
return `${text}/${MANPOWERS}` |
|
||||||
}, |
|
||||||
...slider('manpower', MANPOWERS) |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Budget Project', |
|
||||||
dataIndex: 'plannedCost', |
|
||||||
key: 'plannedCost', |
|
||||||
render: (text) => <a>{formatRibuanDecimal(text)}</a>, |
|
||||||
...slider('plannedCost', MAXPLANNEDCOST) |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Actual Cost', |
|
||||||
dataIndex: 'actualCost', |
|
||||||
key: 'actualCost', |
|
||||||
render: (text) => <a>{formatRibuanDecimal(text)}</a>, |
|
||||||
...slider('actualCost', MAXACTUALCOST) |
|
||||||
|
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Cost Variance', |
|
||||||
dataIndex: 'costVariance', |
|
||||||
key: 'costVariance', |
|
||||||
render: (text) => <a>{formatRibuanDecimal(text)}</a>, |
|
||||||
...slider('costVariance', MAXCOSTVARIANCE) |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Cost Health', |
|
||||||
dataIndex: 'costHealth', |
|
||||||
key: 'costHealth', |
|
||||||
render: (text) => { |
|
||||||
if (text == "on-budget") { |
|
||||||
return <Badge color="success">On Budget</Badge> |
|
||||||
} else if (text == "warning") { |
|
||||||
return <Badge color="warning">Warning</Badge> |
|
||||||
} else { |
|
||||||
return <Badge color="danger">Danger</Badge> |
|
||||||
} |
|
||||||
}, |
|
||||||
filters: _.uniqWith(filterData(dataTable)(i => i.costHealth), _.isEqual), |
|
||||||
onFilter: (value, record) => record.costHealth.indexOf(value) === 0, |
|
||||||
}, |
|
||||||
{ |
|
||||||
title: 'Progress', |
|
||||||
dataIndex: 'progress', |
|
||||||
key: 'progress', |
|
||||||
render: (text) => { |
|
||||||
return <Badge color={parseInt(text) > 74 ? 'success' : text > 49 ? 'warning' : 'danger'}>{text}%</Badge> |
|
||||||
}, |
|
||||||
...slider('progress', 100) |
|
||||||
}, |
|
||||||
]; |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
getProjects(); |
|
||||||
}, []) |
|
||||||
|
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Row gutter={[16, 16]}> |
|
||||||
<Col span={24}> |
|
||||||
<Table |
|
||||||
columns={columns} |
|
||||||
dataSource={dataTable} |
|
||||||
/> |
|
||||||
</Col> |
|
||||||
</Row> |
|
||||||
</> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default TableDashboardV1; |
|
||||||
@ -1,49 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Bar } from 'react-chartjs-2'; |
|
||||||
|
|
||||||
const data = { |
|
||||||
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: '# of Votes', |
|
||||||
data: [12, 19, 3, 5, 2, 3], |
|
||||||
backgroundColor: [ |
|
||||||
'rgba(255, 99, 132, 0.2)', |
|
||||||
'rgba(54, 162, 235, 0.2)', |
|
||||||
'rgba(255, 206, 86, 0.2)', |
|
||||||
'rgba(75, 192, 192, 0.2)', |
|
||||||
'rgba(153, 102, 255, 0.2)', |
|
||||||
'rgba(255, 159, 64, 0.2)', |
|
||||||
], |
|
||||||
borderColor: [ |
|
||||||
'rgba(255, 99, 132, 1)', |
|
||||||
'rgba(54, 162, 235, 1)', |
|
||||||
'rgba(255, 206, 86, 1)', |
|
||||||
'rgba(75, 192, 192, 1)', |
|
||||||
'rgba(153, 102, 255, 1)', |
|
||||||
'rgba(255, 159, 64, 1)', |
|
||||||
], |
|
||||||
borderWidth: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
const options = { |
|
||||||
scales: { |
|
||||||
yAxes: [ |
|
||||||
{ |
|
||||||
ticks: { |
|
||||||
beginAtZero: true, |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
}; |
|
||||||
|
|
||||||
const BarChart = () => ( |
|
||||||
<> |
|
||||||
<Bar data={data} options={options} /> |
|
||||||
</> |
|
||||||
); |
|
||||||
|
|
||||||
export default BarChart; |
|
||||||
@ -1,128 +0,0 @@ |
|||||||
.number-asset { |
|
||||||
font-size: 50px; |
|
||||||
font-weight: bold; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
|
|
||||||
.text-bold { |
|
||||||
font-weight: bold; |
|
||||||
} |
|
||||||
|
|
||||||
.view-rectangle { |
|
||||||
display: flex; |
|
||||||
flex-direction: row; |
|
||||||
width: 100%; |
|
||||||
justify-content: space-between; |
|
||||||
} |
|
||||||
|
|
||||||
.view1 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
margin-bottom: -20px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #008B8B; |
|
||||||
} |
|
||||||
|
|
||||||
.view2 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #8B008B; |
|
||||||
} |
|
||||||
|
|
||||||
.view3 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #7CFC00; |
|
||||||
} |
|
||||||
|
|
||||||
.view4 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #FF0000; |
|
||||||
} |
|
||||||
|
|
||||||
.view5 { |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
|
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
background-color: #4682B4; |
|
||||||
} |
|
||||||
|
|
||||||
.number-style { |
|
||||||
font-size: 30px; |
|
||||||
color: black; |
|
||||||
font-weight: bold; |
|
||||||
margin-bottom:15px; |
|
||||||
} |
|
||||||
|
|
||||||
.number-style1 { |
|
||||||
font-size: 30px; |
|
||||||
color: #FFFFFF; |
|
||||||
font-weight: bold; |
|
||||||
margin-bottom:15px; |
|
||||||
} |
|
||||||
|
|
||||||
.daily-info-card { |
|
||||||
min-width: 130px; |
|
||||||
width: 220px; |
|
||||||
height: 100px; |
|
||||||
padding: 10px; |
|
||||||
justify-content: center; |
|
||||||
align-items: center; |
|
||||||
text-align: center; |
|
||||||
margin: 4px; |
|
||||||
border-radius: 8px; |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
.dashboard-container { |
|
||||||
overflow-x: auto; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-window-button-container { |
|
||||||
float: right; |
|
||||||
right: 0px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-close, .maptable-maximize, .maptable-minimize { |
|
||||||
cursor: pointer; |
|
||||||
padding: 4px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-header { |
|
||||||
margin-bottom: -10px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-title { |
|
||||||
font-size: 24px; |
|
||||||
font-weight: 700; |
|
||||||
text-align: left; |
|
||||||
margin-left: 20px; |
|
||||||
} |
|
||||||
|
|
||||||
.maptable-close:hover, .maptable-maximize:hover, .maptable-minimize:hover { |
|
||||||
color: #20a8d8; |
|
||||||
} |
|
||||||
@ -1,18 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Line } from 'react-chartjs-2'; |
|
||||||
|
|
||||||
const MultiAxisLine = ({ data, handleClickChart, optionsAdded }) => { |
|
||||||
const options = { ...optionsAdded }; |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<Line |
|
||||||
data={data} |
|
||||||
options={options} |
|
||||||
{...handleClickChart && { getElementAtEvent: handleClickChart }} |
|
||||||
/> |
|
||||||
</> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default MultiAxisLine; |
|
||||||
@ -1,23 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { Pie } from 'react-chartjs-2'; |
|
||||||
|
|
||||||
const options = { |
|
||||||
responsive: true, |
|
||||||
maintainAspectRatio: false, |
|
||||||
title: { |
|
||||||
display: true, |
|
||||||
text: 'Status Proyek' |
|
||||||
}, |
|
||||||
legend: { |
|
||||||
display: true, |
|
||||||
position: 'bottom' |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const PieChart = ({data}) => ( |
|
||||||
<> |
|
||||||
<Pie data={data} options={options} /> |
|
||||||
</> |
|
||||||
); |
|
||||||
|
|
||||||
export default PieChart; |
|
||||||
@ -1,308 +0,0 @@ |
|||||||
import '../../../node_modules/react-grid-layout/css/styles.css'; |
|
||||||
import '../../../node_modules/react-resizable/css/styles.css'; |
|
||||||
import '../Map/CustomScroll.css'; |
|
||||||
import './Dashboard.css'; |
|
||||||
import { Chart } from 'chart.js'; |
|
||||||
import { ChartDataLabels } from 'chartjs-plugin-datalabels'; |
|
||||||
import ContentLoader from "react-content-loader" |
|
||||||
import LineChart from './LineChart'; |
|
||||||
import PieChart from './PieChart'; |
|
||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
import SiopasMap from '../Map/Map_16.js'; |
|
||||||
import axios from 'axios' |
|
||||||
import moment from 'moment'; |
|
||||||
import numeral from 'numeral'; |
|
||||||
import { BASE_SIMPRO } from '../../const/ApiConst'; |
|
||||||
import { DatePicker } from 'antd'; |
|
||||||
import { NotificationContainer, NotificationManager } from 'react-notifications'; |
|
||||||
import { PLANNING_REALISASI_SEARCH, PLANNING_SEARCH, PROYEK_SEARCH_DETAIL, PROYEK_EDIT } from '../../const/ApiConst.js'; |
|
||||||
import { Pagination, Tooltip, Tree, List, Checkbox } from 'antd'; |
|
||||||
import { getChildrenTree, formatRupiah, DATE_TIME_FORMAT } from '../../const/CustomFunc.js'; |
|
||||||
import { projectTreeConst } from '../../const/LayerTreeConst.js'; |
|
||||||
import { |
|
||||||
Card, Modal, ModalHeader, ModalBody, ModalFooter, Button, |
|
||||||
CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row |
|
||||||
} from 'reactstrap'; |
|
||||||
import { |
|
||||||
DONE_COLOR, IZIN_COLOR, NOT_YET_COLOR, |
|
||||||
PRESENT_COLOR, TOTAL_COLOR, |
|
||||||
RED_COLOR, |
|
||||||
ORANGE_COLOR, |
|
||||||
GREEN_COLOR, |
|
||||||
DARK_GREY_COLOR, |
|
||||||
BLUE_COLOR, |
|
||||||
PURPLE_COLOR |
|
||||||
} from '../../const/AppConst.js'; |
|
||||||
const id_org = window.localStorage.getItem('id_org'); |
|
||||||
const roleName = window.localStorage.getItem('role_name'); |
|
||||||
|
|
||||||
Chart.plugins.register(ChartDataLabels); |
|
||||||
const { RangePicker } = DatePicker; |
|
||||||
|
|
||||||
let menu = [ |
|
||||||
{ |
|
||||||
"id": 3, |
|
||||||
"title": "PANIC BUTTON", |
|
||||||
"key": "absent", |
|
||||||
"color": IZIN_COLOR |
|
||||||
}, |
|
||||||
{ |
|
||||||
"id": 4, |
|
||||||
"title": "WASPANG ACTIVE", |
|
||||||
"key": "karyawan telat", |
|
||||||
"color": GREEN_COLOR |
|
||||||
}, |
|
||||||
{ |
|
||||||
"id": 5, |
|
||||||
"title": "WASPANG ABSENT", |
|
||||||
"key": "karyawan tanpa keterangan", |
|
||||||
"color": ORANGE_COLOR |
|
||||||
} |
|
||||||
] |
|
||||||
|
|
||||||
const defaultPersentaseProyek = { |
|
||||||
labels: [], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: 'Progress', |
|
||||||
data: [], |
|
||||||
fill: false, |
|
||||||
backgroundColor: 'rgb(54, 162, 235)', |
|
||||||
borderColor: 'rgba(54, 162, 235, 0.2)', |
|
||||||
yAxisID: 'y-axis-1', |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
const defaultCostProyek = { |
|
||||||
labels: [], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: 'Perencanaan', |
|
||||||
data: [], |
|
||||||
fill: false, |
|
||||||
backgroundColor: 'rgb(255, 99, 132)', |
|
||||||
borderColor: 'rgba(255, 99, 132, 0.2)', |
|
||||||
yAxisID: 'y-axis-1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Realisasi', |
|
||||||
data: [], |
|
||||||
fill: false, |
|
||||||
backgroundColor: 'rgb(54, 162, 235)', |
|
||||||
borderColor: 'rgba(54, 162, 235, 0.2)', |
|
||||||
yAxisID: 'y-axis-1', |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
const defaultStatusProyek = { |
|
||||||
labels: ['Aman', 'Alert', 'Critical'], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: '# of Votes', |
|
||||||
data: [], |
|
||||||
backgroundColor: [ |
|
||||||
'rgba(54, 162, 235, 0.2)', |
|
||||||
'rgba(255, 206, 86, 0.2)', |
|
||||||
'rgba(255, 99, 132, 0.2)', |
|
||||||
], |
|
||||||
borderColor: [ |
|
||||||
'rgba(54, 162, 235, 1)', |
|
||||||
'rgba(255, 206, 86, 1)', |
|
||||||
'rgba(255, 99, 132, 1)', |
|
||||||
], |
|
||||||
borderWidth: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
const DashboardSimpro = () => { |
|
||||||
const token = localStorage.getItem("token") |
|
||||||
const HEADER = { |
|
||||||
headers: { |
|
||||||
"Content-Type": "application/json", |
|
||||||
"Authorization": `Bearer ${token}` |
|
||||||
} |
|
||||||
} |
|
||||||
const [openPlanRealisasi, setopenPlanRealisasi] = useState(false); |
|
||||||
const [openCostPlanRealisasi, setopenCostPlanRealisasi] = useState(false); |
|
||||||
const [dataChart, setDataChart] = useState([]); |
|
||||||
const [projectTree, setProjectTree] = useState([]); |
|
||||||
const [allProyek, setAllProyek] = useState(true); |
|
||||||
const [dataStatusProyek, setDataStatusProyek] = useState(null); |
|
||||||
const [dataPersentaseProyek, setDataPersentaseProyek] = useState(null); |
|
||||||
const [dataCostProyek, setdataCostProyek] = useState(null); |
|
||||||
const [projectTreeVisible, setProjectTreeVisible] = useState(false); |
|
||||||
const [checkedKeysProjectTree, setCheckedKeysProjectTree] = useState([]); |
|
||||||
const [openModalTable, setOpenModalTable] = useState(false); |
|
||||||
const [dataDashboard, setDataDashboard] = useState(null); |
|
||||||
|
|
||||||
const handleGetDataDashboard = async () => { |
|
||||||
const URL = `${BASE_SIMPRO}/dashboard-proyek/search` |
|
||||||
const payload = { |
|
||||||
"columns": [ |
|
||||||
{ "name": "created_at", "logic_operator": "range", "value": "2021-11-06 00:00:00", "value1": "2021-11-06 23:59:59", "operator": "AND" } |
|
||||||
], |
|
||||||
"paging": { "start": 0, "length": -1 } |
|
||||||
} |
|
||||||
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) |
|
||||||
|
|
||||||
if (result.data.code !== 200) { |
|
||||||
NotificationManager.error('Gaga Menambah Data!!', 'Failed'); |
|
||||||
} |
|
||||||
|
|
||||||
setDataDashboard(result.data.data); |
|
||||||
} |
|
||||||
|
|
||||||
const handleGetDataDashboardChart = async () => { |
|
||||||
const URL = `${BASE_SIMPRO}/dashboard-status/search` |
|
||||||
let str = '' |
|
||||||
|
|
||||||
checkedKeysProjectTree.map((res, idx) => { |
|
||||||
if (idx == 0) str += `${res}` |
|
||||||
if (idx != 0) str += `,${res}` |
|
||||||
}) |
|
||||||
|
|
||||||
const payload = { |
|
||||||
"columns": [ |
|
||||||
{ "name": "id", "logic_operator": "in", "value": str ? str : "0", "operator": "AND" } |
|
||||||
], |
|
||||||
"orders": { "columns": ["nama"], "ascending": true } |
|
||||||
} |
|
||||||
|
|
||||||
const result = await axios.post(URL, payload, HEADER).then(res => res).catch(err => err.response) |
|
||||||
|
|
||||||
if (result.data.code !== 200) { |
|
||||||
NotificationManager.error('Gaga Menambah Data!!', 'Failed'); |
|
||||||
} |
|
||||||
|
|
||||||
const { persentase_progress, progress_cost_planning, progress_cost_realisasi, status_proyek } = result.data.data |
|
||||||
const labelPersentaseProyek = persentase_progress ? persentase_progress.map(res => res.label) : [] |
|
||||||
const valuePersentaseProyek = persentase_progress ? persentase_progress.map(res => res.total) : [] |
|
||||||
const persentaseProyek = { |
|
||||||
labels: labelPersentaseProyek, |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: 'Progress', |
|
||||||
data: valuePersentaseProyek, |
|
||||||
fill: false, |
|
||||||
backgroundColor: 'rgb(54, 162, 235)', |
|
||||||
borderColor: 'rgba(54, 162, 235, 0.2)', |
|
||||||
yAxisID: 'y-axis-1', |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
setDataPersentaseProyek(persentaseProyek) |
|
||||||
const labelCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.label) : [] |
|
||||||
const valueCostPlaning = progress_cost_planning ? progress_cost_planning.map(res => res.total) : [] |
|
||||||
const valueCostRealisasi = progress_cost_realisasi ? progress_cost_realisasi.map(res => res.total) : [] |
|
||||||
|
|
||||||
const costProyek = { |
|
||||||
labels: labelCostPlaning, |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: 'Perencanaan', |
|
||||||
data: valueCostPlaning, |
|
||||||
fill: false, |
|
||||||
backgroundColor: 'rgb(255, 99, 132)', |
|
||||||
borderColor: 'rgba(255, 99, 132, 0.2)', |
|
||||||
yAxisID: 'y-axis-1', |
|
||||||
}, |
|
||||||
{ |
|
||||||
label: 'Realisasi', |
|
||||||
data: valueCostRealisasi, |
|
||||||
fill: false, |
|
||||||
backgroundColor: 'rgb(54, 162, 235)', |
|
||||||
borderColor: 'rgba(54, 162, 235, 0.2)', |
|
||||||
yAxisID: 'y-axis-1', |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
setdataCostProyek(costProyek) |
|
||||||
|
|
||||||
const valueStatusProyek = status_proyek ? status_proyek.map(res => res.total) : [] |
|
||||||
|
|
||||||
const statusProyek = { |
|
||||||
labels: ['Aman', 'Alert', 'Critical'], |
|
||||||
datasets: [ |
|
||||||
{ |
|
||||||
label: '# of Votes', |
|
||||||
data: valueStatusProyek, |
|
||||||
backgroundColor: [ |
|
||||||
'rgba(54, 162, 235, 0.2)', |
|
||||||
'rgba(255, 206, 86, 0.2)', |
|
||||||
'rgba(255, 99, 132, 0.2)', |
|
||||||
], |
|
||||||
borderColor: [ |
|
||||||
'rgba(54, 162, 235, 1)', |
|
||||||
'rgba(255, 206, 86, 1)', |
|
||||||
'rgba(255, 99, 132, 1)', |
|
||||||
], |
|
||||||
borderWidth: 1, |
|
||||||
}, |
|
||||||
], |
|
||||||
}; |
|
||||||
|
|
||||||
setDataStatusProyek(statusProyek) |
|
||||||
|
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
const getProyek = async () => { |
|
||||||
const URL = `${BASE_SIMPRO}/proyek/list?start=0&length=-1&orderby=nama&asc=true` |
|
||||||
const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response) |
|
||||||
if (result.data.code !== 200) { |
|
||||||
NotificationManager.error('Gaga Menambah Data!!', 'Failed'); |
|
||||||
} |
|
||||||
setProjectTree(result.data.data); |
|
||||||
const arr = result.data.data.map(res => res.id) |
|
||||||
setCheckedKeysProjectTree(arr) |
|
||||||
} |
|
||||||
|
|
||||||
const renderDailyInfo = () => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
<div className="daily-info-card" style={{ backgroundColor: IZIN_COLOR, cursor: 'pointer' }} > |
|
||||||
<p className="number-style1">{dataDashboard ? dataDashboard.panic_button : 0}</p> |
|
||||||
<p style={{ color: "#FFFFFF", fontWeight: "bold" }}>PANIC BUTTON</p> |
|
||||||
</div> |
|
||||||
<div className="daily-info-card" style={{ backgroundColor: GREEN_COLOR, cursor: 'pointer' }} > |
|
||||||
<p className="number-style1">{dataDashboard ? dataDashboard.waspang_status.presensi : 0}</p> |
|
||||||
<p style={{ color: "#FFFFFF", fontWeight: "bold" }}>WASPANG ACTIVE</p> |
|
||||||
</div> |
|
||||||
<div className="daily-info-card" style={{ backgroundColor: ORANGE_COLOR, cursor: 'pointer' }} > |
|
||||||
<p className="number-style1">{dataDashboard ? dataDashboard.waspang_status.absensi : 0}</p> |
|
||||||
<p style={{ color: "#FFFFFF", fontWeight: "bold" }}>WASPANG ABSENT</p> |
|
||||||
</div> |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
const handleClickChart = param => { |
|
||||||
if (!param.length) return; |
|
||||||
const { _datasetIndex, _index } = param[0]; |
|
||||||
const data = dataPersentaseProyek.datasets[_datasetIndex].label |
|
||||||
setOpenModalTable(true) |
|
||||||
} |
|
||||||
|
|
||||||
const handleClickProyek = id => { |
|
||||||
const arr = [...checkedKeysProjectTree] |
|
||||||
const idx = arr.indexOf(id) |
|
||||||
if (idx == -1) { |
|
||||||
arr.push(id) |
|
||||||
} else { |
|
||||||
arr.splice(idx, 1) |
|
||||||
} |
|
||||||
setCheckedKeysProjectTree(arr) |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<> |
|
||||||
<SiopasMap /> |
|
||||||
</> |
|
||||||
|
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default DashboardSimpro; |
|
||||||
Loading…
Reference in new issue