Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
T
Tia-dev
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Dida Adams Arizona
Tia-dev
Commits
dc0a33c0
Commit
dc0a33c0
authored
Jan 28, 2021
by
d.arizona
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update banyak
parent
fdf781c9
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
408 additions
and
46 deletions
+408
-46
index.js
src/api/index.js
+3
-2
BudgetTahunan.js
src/container/BudgetTahunan.js
+1
-1
DashboardCAT.js
src/container/Laporan/DashboardCAT.js
+298
-37
ExceutiveScoreboard.js
src/container/Laporan/ExceutiveScoreboard.js
+104
-5
MonthlyReport.js
src/container/MonthlyReport.js
+2
-1
No files found.
src/api/index.js
View file @
dc0a33c0
...
@@ -256,7 +256,7 @@ const create = (type = "") => {
...
@@ -256,7 +256,7 @@ const create = (type = "") => {
const
getReportFRMR
=
(
body
)
=>
api
.
post
(
'/transaction/summary_ratio/monthly_report/get_report_hierarki'
,
body
)
const
getReportFRMR
=
(
body
)
=>
api
.
post
(
'/transaction/summary_ratio/monthly_report/get_report_hierarki'
,
body
)
const
getReportFRLastMR
=
(
body
)
=>
api
.
post
(
'/transaction/summary_ratio/monthly_report_last_year/get_report_hierarki'
,
body
)
const
getReportFRLastMR
=
(
body
)
=>
api
.
post
(
'/transaction/summary_ratio/monthly_report_last_year/get_report_hierarki'
,
body
)
const
getReportBSSuma
=
(
body
)
=>
api
.
post
(
'/transaction/summary/balance_sheet/get_report_hierarki'
,
body
)
const
getReportBSSuma
=
(
body
)
=>
api
.
post
(
'/transaction/summary/balance_sheet/get_report_hierarki'
,
body
)
const
getDashboardCAT
=
(
body
)
=>
api
.
post
(
'/dashboard/cat'
,
body
)
//CASH FLOW
//CASH FLOW
const
getDetailReportCF
=
(
body
)
=>
api
.
post
(
'/transaction/cash_flow/master_budget/get_report_hierarki'
,
body
)
const
getDetailReportCF
=
(
body
)
=>
api
.
post
(
'/transaction/cash_flow/master_budget/get_report_hierarki'
,
body
)
...
@@ -621,7 +621,8 @@ const create = (type = "") => {
...
@@ -621,7 +621,8 @@ const create = (type = "") => {
getReportFRMB
,
getReportFRMB
,
getReportFRMR
,
getReportFRMR
,
getReportFRLastMR
,
getReportFRLastMR
,
getReportBSSuma
getReportBSSuma
,
getDashboardCAT
}
}
}
}
...
...
src/container/BudgetTahunan.js
View file @
dc0a33c0
...
@@ -1458,7 +1458,7 @@ export default class BudgetTahunan extends Component {
...
@@ -1458,7 +1458,7 @@ export default class BudgetTahunan extends Component {
<
span
>
INCOMPLETE
<
/span>
:
<
span
>
INCOMPLETE
<
/span>
:
val
===
"revision"
?
val
===
"revision"
?
<
span
>
REVISION
<
/span>
:
<
span
>
REVISION
<
/span>
:
val
===
"approval_proc
c
ess"
?
val
===
"approval_process"
?
<
span
>
APPROVAL
PROCCESS
<
/span>
:
<
span
>
APPROVAL
PROCCESS
<
/span>
:
val
===
"approval_review"
?
val
===
"approval_review"
?
<
span
>
APPROVAL
REVIEW
<
/span>
:
<
span
>
APPROVAL
REVIEW
<
/span>
:
...
...
src/container/Laporan/DashboardCAT.js
View file @
dc0a33c0
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
{
Typography
,
MenuItem
,
TextField
,
AppBar
,
Paper
,
Tabs
,
Tab
}
from
'@material-ui/core'
import
{
Typography
,
MenuItem
,
TextField
,
AppBar
,
Paper
,
Tabs
,
Tab
,
Snackbar
,
withStyles
}
from
'@material-ui/core'
import
ExceutiveScoreboard
from
'./ExceutiveScoreboard'
import
ExceutiveScoreboard
from
'./ExceutiveScoreboard'
import
StrategiMap
from
'./StrategiMap'
import
StrategiMap
from
'./StrategiMap'
import
KPIs
from
'./KPIs'
import
KPIs
from
'./KPIs'
import
api
from
'../../api'
import
{
Autocomplete
}
from
'@material-ui/lab'
import
{
PropagateLoader
}
from
'react-spinners'
import
MuiAlert
from
'@material-ui/lab/Alert'
;
import
Constant
from
'../../library/Constant'
import
{
titleCase
}
from
'../../library/Utils'
import
{
format
}
from
'date-fns'
;
const
Alert
=
withStyles
({
})((
props
)
=>
<
MuiAlert
elevation
=
{
6
}
variant
=
"filled"
{...
props
}
/>
)
;
export
default
class
DashboardCAT
extends
Component
{
export
default
class
DashboardCAT
extends
Component
{
constructor
(
props
)
{
constructor
(
props
)
{
...
@@ -10,8 +20,233 @@ export default class DashboardCAT extends Component {
...
@@ -10,8 +20,233 @@ export default class DashboardCAT extends Component {
this
.
state
=
{
this
.
state
=
{
periode
:
'2020'
,
periode
:
'2020'
,
perusahaan
:
'TAP Group'
,
perusahaan
:
'TAP Group'
,
tab
:
0
tab
:
0
,
lastPeriod
:
''
,
listCompany
:
null
,
company
:
null
,
listPeriode
:
null
,
periode
:
null
,
listMonth
:
null
,
month
:
null
,
dataDashboard
:
[]
}
}
componentDidMount
()
{
this
.
getDetailUser
()
// this.getMonth()
}
getDetailUser
()
{
let
userId
=
localStorage
.
getItem
(
Constant
.
USER
)
api
.
create
().
getDetailUser
(
userId
).
then
((
response
)
=>
{
if
(
response
.
data
)
{
if
(
response
.
ok
)
{
if
(
response
.
data
.
status
===
'success'
)
{
this
.
getRole
(
response
.
data
.
data
.
role_id
)
this
.
setState
({
userCompany
:
response
.
data
.
data
.
company
},
()
=>
{
this
.
getCompanyActive
()
})
}
}
}
})
}
getRole
(
id
)
{
api
.
create
().
getDetailRole
(
id
).
then
((
response
)
=>
{
if
(
response
.
data
)
{
if
(
response
.
ok
)
{
if
(
response
.
data
.
status
===
'success'
)
{
// this.setState({ tempData: response.data.data, privileges: response.data.data.privileges })
// // // console.log(response.data.data)
if
(
String
(
response
.
data
.
data
.
role_name
).
toLocaleLowerCase
()
==
'superadmin'
)
{
this
.
setState
({
isAdmin
:
true
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'warning'
},
()
=>
{
if
(
response
.
data
.
message
.
includes
(
"Someone Logged In"
))
{
setTimeout
(()
=>
{
localStorage
.
removeItem
(
Constant
.
TOKEN
)
window
.
location
.
reload
();
},
1000
);
}
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'error'
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
problem
,
tipeAlert
:
'error'
})
}
})
}
getCompanyActive
()
{
api
.
create
().
getPerusahaanActive
().
then
((
response
)
=>
{
console
.
log
(
response
);
if
(
response
.
data
)
{
if
(
response
.
data
.
status
===
'success'
)
{
let
data
=
response
.
data
.
data
let
comID
=
this
.
state
.
rawData
?
this
.
state
.
rawData
.
company_id
:
0
let
companyData
=
data
.
map
((
item
)
=>
{
return
{
company_id
:
item
.
company_id
,
company_name
:
item
.
company_name
,
}
})
let
arrayBaru
=
[]
this
.
state
.
userCompany
.
map
((
item
,
index
)
=>
{
let
indexID
=
companyData
.
findIndex
((
val
)
=>
val
.
company_id
==
item
)
if
(
indexID
!==
-
1
)
{
arrayBaru
.
push
(
companyData
[
indexID
])
}
})
let
defaultProps
=
{
options
:
arrayBaru
,
getOptionLabel
:
(
option
)
=>
titleCase
(
option
.
company_name
),
};
let
index
=
arrayBaru
.
findIndex
((
val
)
=>
val
.
company_id
==
comID
)
this
.
setState
({
listCompany
:
defaultProps
,
company
:
arrayBaru
.
length
<
1
?
companyData
[
0
]
:
(
index
==
-
1
?
arrayBaru
[
0
]
:
arrayBaru
[
index
])
},
()
=>
{
this
.
getLastPeriod
()
})
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'warning'
},
()
=>
{
if
(
response
.
data
.
message
.
includes
(
"Someone Logged In"
))
{
setTimeout
(()
=>
{
localStorage
.
removeItem
(
Constant
.
TOKEN
)
window
.
location
.
reload
();
},
1000
);
}
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
problem
,
tipeAlert
:
'error'
,
listCompany
:
null
,
company
:
null
})
}
})
}
getLastPeriod
()
{
console
.
log
(
this
.
state
.
company
)
api
.
create
().
getLastPeriod
(
this
.
state
.
company
.
company_id
).
then
(
response
=>
{
console
.
log
(
response
);
if
(
response
.
data
.
status
===
"success"
)
{
this
.
setState
({
lastPeriod
:
response
.
data
.
data
.
last_periode
,
latestPeriode
:
response
.
data
.
data
.
latest_periode
},
()
=>
{
console
.
log
(
this
.
state
.
lastPeriod
)
this
.
getPeriode
()
})
}
})
}
getPeriode
()
{
api
.
create
().
getPeriodeTransaction
().
then
(
response
=>
{
// let dateNow = new Date
console
.
log
(
response
)
// let year = this.state.rawData ? this.state.rawData.periode : format(dateNow, 'yyyy')
let
currentYear
=
new
Date
().
getFullYear
()
// // // console.log(currentYear)
if
(
response
.
data
)
{
if
(
response
.
data
.
status
===
"success"
)
{
let
data
=
[]
console
.
log
(
response
.
data
.
data
)
console
.
log
(
this
.
state
.
lastPeriod
)
response
.
data
.
data
.
map
((
item
)
=>
{
if
(
this
.
state
.
isApprover
)
{
if
(
item
>=
2000
&&
item
<=
(
Number
(
currentYear
)
+
1
))
{
data
.
push
(
item
)
}
}
else
{
if
((
Number
(
item
)
>=
2000
)
&&
(
Number
(
item
)
==
this
.
state
.
lastPeriod
||
Number
(
item
)
<
this
.
state
.
lastPeriod
))
{
data
.
push
(
item
)
}
}
})
let
periodeData
=
data
.
map
((
item
)
=>
{
return
{
periode
:
item
,
}
})
let
defaultProps
=
{
options
:
periodeData
,
getOptionLabel
:
(
option
)
=>
option
.
periode
,
};
let
periode
=
(
this
.
state
.
lastPeriod
==
""
?
String
(
Number
(
currentYear
)
+
1
)
:
this
.
state
.
lastPeriod
)
let
index
=
data
.
sort
((
a
,
b
)
=>
a
-
b
).
findIndex
((
val
)
=>
val
===
periode
)
// // console.log(this.props.location.state.rawData)
// console.log(this.state.lastPeriod)
console
.
log
(
data
)
console
.
log
(
periodeData
)
console
.
log
(
defaultProps
)
// // // console.log(index)
this
.
setState
({
listPeriode
:
defaultProps
,
periode
:
index
===
-
1
?
periodeData
[
0
]
:
periodeData
[
index
]
},
()
=>
{
this
.
getMonth
()
})
}
}
})
}
getMonth
()
{
api
.
create
().
getMonthTransaction
().
then
(
response
=>
{
let
dateNow
=
new
Date
let
month
=
format
(
dateNow
,
'MMMM'
)
console
.
log
(
response
);
if
(
response
.
data
)
{
if
(
response
.
data
.
status
===
"success"
)
{
console
.
log
(
response
);
let
data
=
response
.
data
.
data
let
monthData
=
data
.
map
((
item
)
=>
{
return
{
month_id
:
item
.
id
,
month_value
:
String
(
item
.
month_name
).
substr
(
0
,
3
)
}
})
let
defaultProps
=
{
options
:
monthData
,
getOptionLabel
:
(
option
)
=>
option
.
month_value
,
};
let
index
=
data
.
findIndex
((
val
)
=>
val
.
month_name
==
month
)
// console.log(index);
this
.
setState
({
listMonth
:
defaultProps
,
month
:
index
==
-
1
?
monthData
[
0
]
:
monthData
[
index
]
},
()
=>
{
this
.
getDasboardCAT
()
})
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'warning'
},
()
=>
{
if
(
response
.
data
.
message
.
includes
(
"Someone Logged In"
))
{
setTimeout
(()
=>
{
localStorage
.
removeItem
(
Constant
.
TOKEN
)
window
.
location
.
reload
();
},
1000
);
}
})
}
}
else
{
this
.
setState
({
alert
:
true
,
messageAlert
:
response
.
data
.
message
,
tipeAlert
:
'error'
})
}
})
}
getDasboardCAT
()
{
let
payload
=
{
"company_id"
:
this
.
state
.
company
.
company_id
,
"year"
:
this
.
state
.
periode
.
periode
}
}
api
.
create
().
getDashboardCAT
(
payload
).
then
((
res
)
=>
{
if
(
res
.
data
.
status
==
'success'
)
{
console
.
log
(
res
)
this
.
setState
({
loading
:
false
,
dataDashboard
:
res
.
data
.
data
})
}
else
{
this
.
setState
({
loading
:
false
})
}
// conole.log(JSON.stringify(payload))
})
}
closeAlert
()
{
this
.
setState
({
alert
:
false
})
}
}
selectTab
=
(
event
,
newEvent
)
=>
{
selectTab
=
(
event
,
newEvent
)
=>
{
...
@@ -33,46 +268,72 @@ export default class DashboardCAT extends Component {
...
@@ -33,46 +268,72 @@ export default class DashboardCAT extends Component {
{
value
:
'2017'
,
label
:
'2017'
},
{
value
:
'2017'
,
label
:
'2017'
},
{
value
:
'2016'
,
label
:
'2016'
},
{
value
:
'2016'
,
label
:
'2016'
},
]
]
const
loadingComponent
=
(
<
div
style
=
{{
position
:
'fixed'
,
zIndex
:
110
,
top
:
0
,
left
:
0
,
width
:
'100%'
,
height
:
'100%'
,
display
:
'flex'
,
justifyContent
:
'center'
,
alignItems
:
'center'
,
background
:
'rgba(255,255,255,0.8)'
}}
>
<
PropagateLoader
// css={override}
size
=
{
20
}
color
=
{
"#274B80"
}
loading
=
{
this
.
state
.
loading
}
/
>
<
/div
>
);
return
(
return
(
<
div
className
=
'a-s-p-mid no-header'
>
<
div
className
=
'a-s-p-mid no-header'
>
<
Snackbar
open
=
{
this
.
state
.
alert
}
autoHideDuration
=
{
6000
}
onClose
=
{()
=>
this
.
closeAlert
()}
>
<
Alert
onClose
=
{()
=>
this
.
closeAlert
()}
severity
=
{
this
.
state
.
tipeAlert
}
>
{
this
.
state
.
messageAlert
}
<
/Alert
>
<
/Snackbar
>
{
this
.
state
.
loading
&&
loadingComponent
}
<
div
className
=
{
"main-color"
}
style
=
{{
padding
:
27
}}
>
<
div
className
=
{
"main-color"
}
style
=
{{
padding
:
27
}}
>
<
Typography
style
=
{{
fontSize
:
'16px'
,
color
:
'white'
}}
>
ON
CHANGE
CAT
<
/Typography
>
<
Typography
style
=
{{
fontSize
:
'16px'
,
color
:
'white'
}}
>
ON
CHANGE
CAT
<
/Typography
>
<
/div
>
<
/div
>
<
div
className
=
"padding-20px"
style
=
{{
minWidth
:
'max-content'
}}
>
<
div
style
=
{{
padding
:
20
}}
>
<
div
style
=
{{
marginTop
:
20
}}
>
<
div
style
=
{{
marginTop
:
0
}}
>
<
TextField
<
Autocomplete
style
=
{{
width
:
250
,
}}
{...
this
.
state
.
listCompany
}
id
=
"perusahaan"
id
=
"month"
select
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
company
:
newInputValue
,
loading
:
true
},
()
=>
{
label
=
"Perusahaan"
this
.
getDasboardCAT
()
value
=
{
this
.
state
.
perusahaan
}
})}
onChange
=
{(
e
)
=>
this
.
setState
({
perusahaan
:
e
.
target
.
value
})}
disableClearable
>
style
=
{{
maxWidth
:
250
,
marginRight
:
20
}}
{
perusahaan
.
map
((
option
)
=>
(
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
label
=
"Company"
margin
=
"normal"
style
=
{{
marginTop
:
7
}}
/>
}
<
MenuItem
key
=
{
option
.
value
}
value
=
{
option
.
value
}
>
value
=
{
this
.
state
.
company
}
{
option
.
label
}
/
>
<
/MenuItem
>
))}
<
/TextField
>
<
/div
>
<
/div
>
<
div
style
=
{{
marginTop
:
20
}}
>
<
div
style
=
{{
marginTop
:
20
}}
>
<
TextField
<
Autocomplete
style
=
{{
width
:
250
,
}}
{...
this
.
state
.
listPeriode
}
id
=
"periode"
id
=
"month"
select
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periode
:
newInputValue
,
loading
:
true
},
()
=>
{
label
=
"Periode"
this
.
getDasboardCAT
()
})}
disableClearable
style
=
{{
maxWidth
:
250
,
marginRight
:
20
}}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
label
=
"Periode"
margin
=
"normal"
style
=
{{
marginTop
:
7
}}
/>
}
value
=
{
this
.
state
.
periode
}
value
=
{
this
.
state
.
periode
}
onChange
=
{(
e
)
=>
this
.
setState
({
periode
:
e
.
target
.
value
})}
/
>
>
{
periode
.
map
((
option
)
=>
(
<
MenuItem
key
=
{
option
.
value
}
value
=
{
option
.
value
}
>
{
option
.
label
}
<
/MenuItem
>
))}
<
/TextField
>
<
/div
>
<
/div
>
<
div
style
=
{{
marginTop
:
20
}}
>
<
Paper
style
=
{{
marginTop
:
20
,
}}
>
<
Autocomplete
{...
this
.
state
.
listMonth
}
id
=
"month"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
month
:
newInputValue
,
loading
:
true
},
()
=>
{
this
.
getDasboardCAT
()
})}
disableClearable
style
=
{{
maxWidth
:
250
,
marginRight
:
20
}}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
label
=
"Month"
margin
=
"normal"
style
=
{{
marginTop
:
7
}}
/>
}
value
=
{
this
.
state
.
month
}
/
>
<
/div
>
<
/div
>
{
!
this
.
state
.
loading
&&
this
.
state
.
dataDashboard
.
length
>
0
&&
<
div
className
=
"padding-20px"
style
=
{{
display
:
'flex'
}}
>
<
Paper
style
=
{{
marginTop
:
10
,
}}
>
<
AppBar
position
=
"static"
style
=
{{
borderTopRightRadius
:
10
,
borderTopLeftRadius
:
10
}}
>
<
AppBar
position
=
"static"
style
=
{{
borderTopRightRadius
:
10
,
borderTopLeftRadius
:
10
}}
>
<
Tabs
indicatorColor
=
"primary"
value
=
{
this
.
state
.
tab
}
onChange
=
{
this
.
selectTab
}
aria
-
label
=
"simple tabs example"
style
=
{{
backgroundColor
:
'#354960'
,
borderColor
:
'transparent'
,
borderTopRightRadius
:
10
,
borderTopLeftRadius
:
10
}}
>
<
Tabs
indicatorColor
=
"primary"
value
=
{
this
.
state
.
tab
}
onChange
=
{
this
.
selectTab
}
aria
-
label
=
"simple tabs example"
style
=
{{
backgroundColor
:
'#354960'
,
borderColor
:
'transparent'
,
borderTopRightRadius
:
10
,
borderTopLeftRadius
:
10
}}
>
<
Tab
label
=
"Executive Scoreboard"
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
/
>
<
Tab
label
=
"Executive Scoreboard"
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
/
>
...
@@ -81,15 +342,15 @@ export default class DashboardCAT extends Component {
...
@@ -81,15 +342,15 @@ export default class DashboardCAT extends Component {
<
/Tabs
>
<
/Tabs
>
<
/AppBar
>
<
/AppBar
>
{
this
.
state
.
tab
===
0
?
{
this
.
state
.
tab
===
0
?
<
ExceutiveScoreboard
height
=
{
this
.
props
.
height
}
/
>
<
ExceutiveScoreboard
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
:
:
this
.
state
.
tab
===
1
?
this
.
state
.
tab
===
1
?
<
StrategiMap
height
=
{
this
.
props
.
height
}
/
>
<
StrategiMap
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
:
:
<
KPIs
height
=
{
this
.
props
.
height
}
/
>
<
KPIs
height
=
{
this
.
props
.
height
}
data
=
{
this
.
state
.
dataDashboard
}
dataPayload
=
{{
month
:
this
.
state
.
month
,
periode
:
this
.
state
.
periode
,
company
:
this
.
state
.
company
}}
/
>
}
}
<
/Paper
>
<
/Paper
>
<
/div
>
<
/div>
}
<
/div
>
<
/div
>
)
)
}
}
...
...
src/container/Laporan/ExceutiveScoreboard.js
View file @
dc0a33c0
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
ReactSpeedometer
from
"react-d3-speedometer"
import
ReactSpeedometer
from
"react-d3-speedometer"
import
{
Paper
,
Typography
}
from
'@material-ui/core'
import
{
GridList
,
Paper
,
Typography
,
GridListTile
}
from
'@material-ui/core'
import
Images
from
'../../assets/Images'
import
Images
from
'../../assets/Images'
import
LineChart
from
'react-linechart'
;
import
LineChart
from
'react-linechart'
;
...
@@ -15,11 +15,83 @@ export default class ExceutiveScoreboard extends Component {
...
@@ -15,11 +15,83 @@ export default class ExceutiveScoreboard extends Component {
{
judul
:
"Internal Perspective"
,
kpi
:
5
,
rank
:
'C'
,
value
:
2.61
,
status
:
'down'
},
{
judul
:
"Internal Perspective"
,
kpi
:
5
,
rank
:
'C'
,
value
:
2.61
,
status
:
'down'
},
{
judul
:
"Financial"
,
kpi
:
5
,
rank
:
'B+'
,
value
:
3.52
,
status
:
'up'
},
{
judul
:
"Financial"
,
kpi
:
5
,
rank
:
'B+'
,
value
:
3.52
,
status
:
'up'
},
],
],
data
:
this
.
props
.
data
,
dataPayload
:
this
.
props
.
dataPayload
,
selectIndex
:
null
selectIndex
:
null
}
}
}
}
componentDidMount
()
{
console
.
log
(
this
.
props
.
data
)
console
.
log
(
this
.
state
.
dataPayload
)
let
arrOverAll
=
[]
let
totalOverAll
=
0
if
(
this
.
state
.
data
.
length
>
0
)
{
this
.
state
.
data
.
map
((
item
,
index
)
=>
{
if
(
item
.
parent
==
null
||
item
.
parent
==
'null'
)
{
arrOverAll
.
push
(
item
)
}
else
{
totalOverAll
+=
this
.
state
.
dataPayload
.
month
.
month_id
==
1
?
Number
(
item
.
month1
==
null
?
0
:
item
.
month1
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
2
?
Number
(
item
.
month2
==
null
?
0
:
item
.
month2
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
3
?
Number
(
item
.
month3
==
null
?
0
:
item
.
month3
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
4
?
Number
(
item
.
month4
==
null
?
0
:
item
.
month4
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
5
?
Number
(
item
.
month5
==
null
?
0
:
item
.
month5
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
6
?
Number
(
item
.
month6
==
null
?
0
:
item
.
month6
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
7
?
Number
(
item
.
month7
==
null
?
0
:
item
.
month7
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
8
?
Number
(
item
.
month8
==
null
?
0
:
item
.
month8
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
9
?
Number
(
item
.
month9
==
null
?
0
:
item
.
month9
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
10
?
Number
(
item
.
month10
==
null
?
0
:
item
.
month10
)
:
this
.
state
.
dataPayload
.
month
.
month_id
==
11
?
Number
(
item
.
month11
==
null
?
0
:
item
.
month11
)
:
Number
(
item
.
month12
==
null
?
0
:
item
.
month12
)
}
})
let
indexFinancial
=
arrOverAll
.
findIndex
((
val
)
=>
String
(
val
.
item_name
).
toLocaleLowerCase
().
includes
(
'financial'
))
let
indexCust
=
arrOverAll
.
findIndex
((
val
)
=>
String
(
val
.
item_name
).
toLocaleLowerCase
().
includes
(
'customer'
))
let
indexInternal
=
arrOverAll
.
findIndex
((
val
)
=>
String
(
val
.
item_name
).
toLocaleLowerCase
().
includes
(
'internal'
))
let
indexLearn
=
arrOverAll
.
findIndex
((
val
)
=>
String
(
val
.
item_name
).
toLocaleLowerCase
().
includes
(
'learn'
))
let
arrFinancial
=
[]
let
arrCust
=
[]
let
arrInternal
=
[]
let
arrLearn
=
[]
console
.
log
(
indexFinancial
)
console
.
log
(
indexCust
)
console
.
log
(
indexInternal
)
console
.
log
(
indexLearn
)
if
(
indexFinancial
!=
-
1
)
{
arrFinancial
=
this
.
state
.
data
.
filter
((
val
)
=>
val
.
parent
==
arrOverAll
[
indexFinancial
].
item_report_id
)
}
if
(
indexCust
!=
-
1
)
{
arrCust
=
this
.
state
.
data
.
filter
((
val
)
=>
val
.
parent
==
arrOverAll
[
indexCust
].
item_report_id
)
}
if
(
indexInternal
!=
-
1
)
{
arrInternal
=
this
.
state
.
data
.
filter
((
val
)
=>
val
.
parent
==
arrOverAll
[
indexInternal
].
item_report_id
)
}
if
(
indexLearn
!=
-
1
)
{
arrLearn
=
this
.
state
.
data
.
filter
((
val
)
=>
val
.
parent
==
arrOverAll
[
indexLearn
].
item_report_id
)
}
console
.
log
(
totalOverAll
)
console
.
log
(
arrOverAll
)
console
.
log
(
arrFinancial
)
console
.
log
(
arrCust
)
console
.
log
(
arrInternal
)
console
.
log
(
arrLearn
)
}
}
render
()
{
render
()
{
let
{
selectIndex
}
=
this
.
state
let
{
selectIndex
}
=
this
.
state
let
yuk
=
[
1
,
2
,
3
]
const
data
=
[
const
data
=
[
{
{
color
:
"steelblue"
,
color
:
"steelblue"
,
...
@@ -39,7 +111,7 @@ export default class ExceutiveScoreboard extends Component {
...
@@ -39,7 +111,7 @@ export default class ExceutiveScoreboard extends Component {
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
justifyContent
:
'space-between'
,
flexFlow
:
'wrap'
}}
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
justifyContent
:
'space-between'
,
flexFlow
:
'wrap'
}}
>
{
this
.
state
.
listDummy
.
map
((
item
,
index
)
=>
{
{
this
.
state
.
listDummy
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
this
.
state
.
selectIndex
===
index
?
'#6885a6'
:
'#fff'
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
}}
onClick
=
{()
=>
this
.
setState
({
selectIndex
:
index
})}
>
<
div
style
=
{{
padding
:
10
,
backgroundColor
:
this
.
state
.
selectIndex
===
index
?
'#6885a6'
:
'#fff'
,
borderRadius
:
6
,
paddingBottom
:
20
,
margin
:
10
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
}}
onClick
=
{()
=>
this
.
setState
({
selectIndex
:
index
}
,
()
=>
console
.
log
(
this
.
state
.
data
)
)}
>
<
span
style
=
{{
fontSize
:
'17px'
,
color
:
this
.
state
.
selectIndex
===
index
?
'#fff'
:
'#7e8085'
}}
>
{
item
.
judul
}
<
/span
>
<
span
style
=
{{
fontSize
:
'17px'
,
color
:
this
.
state
.
selectIndex
===
index
?
'#fff'
:
'#7e8085'
}}
>
{
item
.
judul
}
<
/span
>
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
index
===
0
?
54
:
30
,
placeContent
:
'center'
}}
>
<
div
style
=
{{
backgroundColor
:
'transparent'
,
display
:
'flex'
,
marginTop
:
index
===
0
?
54
:
30
,
placeContent
:
'center'
}}
>
<
div
>
<
div
>
...
@@ -78,7 +150,34 @@ export default class ExceutiveScoreboard extends Component {
...
@@ -78,7 +150,34 @@ export default class ExceutiveScoreboard extends Component {
)
)
})}
})}
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
566
,
height
:
233
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
padding
:
20
,
justifyContent
:
'space-between'
,
display
:
'grid'
,
margin
:
10
}}
>
<
div
style
=
{{
padding
:
10
,
marginTop
:
10
,
display
:
'flex'
,
width
:
'100%'
}}
>
<
GridList
cellHeight
=
{
250
}
cols
=
{
3
}
>
{
yuk
.
map
((
tile
)
=>
(
<
GridListTile
key
=
{
tile
}
cols
=
{
1
}
style
=
{{}}
>
<
div
style
=
{{
maxWidth
:
566
,
height
:
233
,
boxShadow
:
'0 1px 4px 0 rgba(0, 0, 0, 0.25)'
,
padding
:
20
,
marginLeft
:
5
,
marginTop
:
5
,
marginRight
:
5
,
display
:
'inline-grid'
}}
>
<
div
>
<
span
style
=
{{
fontSize
:
17
}}
>
YTD
Revenue
<
/span
>
<
Typography
style
=
{{
fontSize
:
24
,
fontWeight
:
'bold'
}}
>
1
,
016
,
489.78
<
/Typography
>
<
Typography
style
=
{{
fontSize
:
16
,
fontWeight
:
'bold'
}}
>
In
IDR
mn
<
/Typography
>
<
/div
>
<
LineChart
width
=
{
400
}
height
=
{
50
}
data
=
{
data
}
yMin
=
{
0
}
yMax
=
{
10
}
hideXAxis
=
{
true
}
hideYAxis
=
{
true
}
hideXLabel
=
{
true
}
hideYLabel
=
{
true
}
/
>
<
/div
>
<
/GridListTile
>
))}
<
/GridList
>
<
/div
>
{
/* <div style={{ width: 566, height: 233, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)', padding: 20, justifyContent: 'space-between', display: 'grid', margin: 10 }}>
<div>
<div>
<span style={{ fontSize: 17 }}>YTD Revenue</span>
<span style={{ fontSize: 17 }}>YTD Revenue</span>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}>1,016,489.78</Typography>
<Typography style={{ fontSize: 24, fontWeight: 'bold' }}>1,016,489.78</Typography>
...
@@ -95,8 +194,8 @@ export default class ExceutiveScoreboard extends Component {
...
@@ -95,8 +194,8 @@ export default class ExceutiveScoreboard extends Component {
hideXLabel={true}
hideXLabel={true}
hideYLabel={true}
hideYLabel={true}
/>
/>
<
/div
>
</div>
*/
}
<
/div
>
<
/div
>
)
)
}
}
}
}
src/container/MonthlyReport.js
View file @
dc0a33c0
...
@@ -692,6 +692,7 @@ export default class MonthlyReport extends Component {
...
@@ -692,6 +692,7 @@ export default class MonthlyReport extends Component {
saveToMonthlyReport
(
type
)
{
saveToMonthlyReport
(
type
)
{
this
.
setState
({
this
.
setState
({
visibleMonthlyReport
:
true
,
visibleMonthlyReport
:
true
,
loading
:
true
,
visibleBS
:
false
,
visibleBS
:
false
,
visiblePL
:
false
,
visiblePL
:
false
,
visibleCAT
:
false
,
visibleCAT
:
false
,
...
@@ -1428,7 +1429,7 @@ export default class MonthlyReport extends Component {
...
@@ -1428,7 +1429,7 @@ export default class MonthlyReport extends Component {
<
span
>
INCOMPLETE
<
/span>
:
<
span
>
INCOMPLETE
<
/span>
:
val
===
"revision"
?
val
===
"revision"
?
<
span
>
REVISION
<
/span>
:
<
span
>
REVISION
<
/span>
:
val
===
"approval_proc
c
ess"
?
val
===
"approval_process"
?
<
span
>
APPROVAL
PROCCESS
<
/span>
:
<
span
>
APPROVAL
PROCCESS
<
/span>
:
val
===
"approval_review"
?
val
===
"approval_review"
?
<
span
>
APPROVAL
REVIEW
<
/span>
:
<
span
>
APPROVAL
REVIEW
<
/span>
:
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment