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
68e319a1
Commit
68e319a1
authored
Oct 02, 2020
by
Deni Rinaldi
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
+++
parent
bfe70c4c
Changes
7
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
416 additions
and
344 deletions
+416
-344
Images.js
src/assets/Images.js
+4
-1
dot-done.svg
src/assets/dot-done.svg
+6
-0
dot-open.svg
src/assets/dot-open.svg
+6
-0
dot-overdue.svg
src/assets/dot-overdue.svg
+6
-0
BudgetTahunan.js
src/container/BudgetTahunan.js
+7
-7
CreateManagementDoc.js
src/container/DocumentManagement/CreateManagementDoc.js
+204
-199
HomePage.js
src/container/HomePage.js
+183
-137
No files found.
src/assets/Images.js
View file @
68e319a1
...
...
@@ -51,7 +51,10 @@ const Images = {
camera
:
require
(
'./camera.svg'
),
meeting
:
require
(
'./meeting.jpg'
),
triputraBlack
:
require
(
'./triputra-black.jpg'
),
delete
:
require
(
'./delete.svg'
)
delete
:
require
(
'./delete.svg'
),
dotDone
:
require
(
'./dot-done.svg'
),
dotOverdue
:
require
(
'./dot-overdue.svg'
),
dotOpen
:
require
(
'./dot-open.svg'
),
}
...
...
src/assets/dot-done.svg
0 → 100644
View file @
68e319a1
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"10"
height=
"10"
viewBox=
"0 0 10 10"
>
<g
fill=
"none"
fill-rule=
"evenodd"
transform=
"translate(-7 -7)"
>
<path
d=
"M0 0H24V24H0z"
/>
<circle
cx=
"12"
cy=
"12"
r=
"4.5"
fill=
"#69D56E"
stroke=
"#4CAF51"
/>
</g>
</svg>
src/assets/dot-open.svg
0 → 100644
View file @
68e319a1
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"10"
height=
"10"
viewBox=
"0 0 10 10"
>
<g
fill=
"none"
fill-rule=
"evenodd"
transform=
"translate(-7 -7)"
>
<path
d=
"M0 0H24V24H0z"
/>
<circle
cx=
"12"
cy=
"12"
r=
"4.5"
fill=
"#D8D8D8"
stroke=
"#B1B1B1"
/>
</g>
</svg>
src/assets/dot-overdue.svg
0 → 100644
View file @
68e319a1
<svg
xmlns=
"http://www.w3.org/2000/svg"
width=
"10"
height=
"10"
viewBox=
"0 0 10 10"
>
<g
fill=
"none"
fill-rule=
"evenodd"
transform=
"translate(-7 -7)"
>
<path
d=
"M0 0H24V24H0z"
/>
<circle
cx=
"12"
cy=
"12"
r=
"4.5"
fill=
"#F65A4C"
stroke=
"#CF392C"
/>
</g>
</svg>
src/container/BudgetTahunan.js
View file @
68e319a1
...
...
@@ -752,7 +752,7 @@ export default class BudgetTahunan extends Component {
{
this
.
state
.
visibleBudgetTahunan
&&
(
<
div
>
<
div
className
=
{
"main-color"
}
style
=
{{
height
:
78
,
display
:
'flex'
,
alignItems
:
'center'
,
paddingLeft
:
20
}}
>
<
Typography
style
=
{{
fontSize
:
'16px'
,
color
:
'white'
}}
>
Master
Budget
Submission
&
CAT
Submission
<
/Typography
>
<
Typography
style
=
{{
fontSize
:
'16px'
,
color
:
'white'
}}
>
Master
Budget
&
CAT
Submission
<
/Typography
>
<
/div
>
<
div
style
=
{{
padding
:
20
,
width
:
'100%'
}}
>
<
Paper
style
=
{{
paddingTop
:
10
}}
>
...
...
@@ -890,27 +890,27 @@ export default class BudgetTahunan extends Component {
<
/div
>
{
this
.
state
.
isApprover
===
true
?
this
.
state
.
lastStatus
===
'WAITING FOR REVIEW'
?
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
}}
>
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
,
marginTop
:
20
}}
>
<
span
>
{
this
.
state
.
lastStatus
}
<
/span
>
<
/div> : this.state.lastStatus === 'WAITING FOR YOUR APPROVAL'
?
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
}}
>
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
,
marginTop
:
20
}}
>
<
span
>
{
this
.
state
.
lastStatus
}
<
/span
>
<
/div> : nul
l
:
this
.
state
.
lastStatus
===
'SUBMITTED'
?
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
}}
>
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
,
marginTop
:
20
}}
>
<
span
>
{
this
.
state
.
lastStatus
}
<
/span
>
<
/div>
:
this
.
state
.
lastStatus
===
'WAITING FOR APPROVAL'
?
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
}}
>
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
,
marginTop
:
20
}}
>
<
span
>
{
`
${
this
.
state
.
lastStatus
}
-
${
this
.
state
.
pic
}
`
}
<
/span
>
<
/div>
:
this
.
state
.
lastStatus
===
'REVISION'
?
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
}}
>
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
,
marginTop
:
20
}}
>
<
span
>
NEED
REVISION
<
/span
>
<
/div>
:
this
.
state
.
lastStatus
===
'APPROVED'
?
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
}}
>
<
div
style
=
{{
width
:
'100%'
,
padding
:
'10px 20px'
,
backgroundColor
:
'yellow'
,
textAlign
:
'center'
,
marginTop
:
20
}}
>
<
span
>
APPROVED
<
/span
>
<
/div> : nul
l
}
...
...
src/container/DocumentManagement/CreateManagementDoc.js
View file @
68e319a1
...
...
@@ -44,7 +44,7 @@ export default class CreateManagementDoc extends Component {
messageAlert
:
''
,
fileType
:
''
,
konfirmasi
:
false
,
docId
:
''
,
docId
:
''
,
sizeUpload
:
"1"
,
disabledPeriode
:
false
}
...
...
@@ -59,7 +59,7 @@ export default class CreateManagementDoc extends Component {
console
.
log
(
this
.
props
.
name
)
}
getFileSize
(){
getFileSize
()
{
let
body
=
{
group
:
'MAX_FILE_SIZE'
,
company_id
:
0
,
...
...
@@ -69,7 +69,7 @@ export default class CreateManagementDoc extends Component {
console
.
log
(
response
);
if
(
response
.
data
)
{
if
(
response
.
data
.
status
===
"success"
)
{
if
(
response
.
data
.
data
.
length
==
0
)
{
if
(
response
.
data
.
data
.
length
==
0
)
{
this
.
setState
({
sizeUpload
:
"1"
})
...
...
@@ -184,7 +184,7 @@ export default class CreateManagementDoc extends Component {
})
}
getMonth
(){
getMonth
()
{
api
.
create
().
getMonthTransaction
().
then
(
response
=>
{
let
dateNow
=
new
Date
// let bulan = format(dateNow, 'MMMM')
...
...
@@ -226,19 +226,24 @@ export default class CreateManagementDoc extends Component {
let
fileObj
=
event
let
length
=
event
.
name
.
split
(
"."
).
length
let
fileType
=
event
.
name
.
split
(
"."
)[
length
-
1
]
ExcelRenderer
(
fileObj
,
(
err
,
resp
)
=>
{
// console.log(fileType)
if
(
err
)
{
console
.
log
(
err
);
}
else
{
this
.
setState
({
file
:
event
,
fileType
:
String
(
fileType
)
})
}
})
console
.
log
(
fileType
)
if
(
fileType
===
'zip'
)
{
this
.
setState
({
file
:
event
,
fileType
:
String
(
fileType
)
})
}
else
{
ExcelRenderer
(
fileObj
,
(
err
,
resp
)
=>
{
console
.
log
(
fileType
)
if
(
err
)
{
console
.
log
(
err
);
}
else
{
this
.
setState
({
file
:
event
,
fileType
:
String
(
fileType
)
})
}
})
}
}
validasi
()
{
if
(
this
.
state
.
disabledPeriode
===
true
){
if
(
this
.
state
.
disabledPeriode
===
true
)
{
if
(
R
.
isNil
(
this
.
state
.
getPerusahaan
))
{
this
.
setState
({
errorPerusahaan
:
true
,
msgErrorPerusahaan
:
'Company Cannot be Empty'
})
}
else
if
(
R
.
isNil
(
this
.
state
.
getDocument
))
{
...
...
@@ -254,17 +259,17 @@ export default class CreateManagementDoc extends Component {
formData
.
append
(
"extension"
,
this
.
state
.
fileType
);
formData
.
append
(
"documentPeriode"
,
null
);
formData
.
append
(
"documentMonth"
,
null
);
this
.
setState
({
formData
},
()
=>
{
this
.
setState
({
formData
},
()
=>
{
this
.
props
.
createDocument
(
this
.
state
.
formData
,
this
.
props
.
setting_id
,
this
.
props
.
name
)
})
var
object
=
{};
formData
.
forEach
(
function
(
value
,
key
)
{
formData
.
forEach
(
function
(
value
,
key
)
{
object
[
key
]
=
value
;
});
var
json
=
JSON
.
stringify
(
object
);
console
.
log
(
object
)
}
}
else
{
if
(
R
.
isNil
(
this
.
state
.
getPerusahaan
))
{
this
.
setState
({
errorPerusahaan
:
true
,
msgErrorPerusahaan
:
'Company Cannot be Empty'
})
...
...
@@ -272,7 +277,7 @@ export default class CreateManagementDoc extends Component {
this
.
setState
({
errorDocument
:
true
,
msgErrorDocument
:
'Category Cannot be Empty'
})
}
else
if
(
R
.
isNil
(
this
.
state
.
periode
))
{
this
.
setState
({
errorPeriode
:
true
,
msgErrorPeriode
:
'Period Cannot be Empty'
})
}
else
if
(
R
.
isNil
(
this
.
state
.
monthId
))
{
}
else
if
(
R
.
isNil
(
this
.
state
.
monthId
))
{
this
.
setState
({
errorMonth
:
true
,
msgErrorMonth
:
'Month Cannot be Empty'
})
}
else
if
(
R
.
isNil
(
this
.
state
.
file
))
{
...
...
@@ -286,15 +291,15 @@ export default class CreateManagementDoc extends Component {
formData
.
append
(
"extension"
,
this
.
state
.
fileType
);
formData
.
append
(
"documentPeriode"
,
this
.
state
.
periode
.
periode
);
formData
.
append
(
"documentMonth"
,
this
.
state
.
monthId
.
month_id
);
this
.
setState
({
formData
},
()
=>
{
this
.
setState
({
formData
},
()
=>
{
this
.
props
.
createDocument
(
this
.
state
.
formData
,
this
.
props
.
setting_id
,
this
.
props
.
name
)
})
}
}
}
}
deleteFile
(
e
){
this
.
setState
({
file
:
null
})
deleteFile
(
e
)
{
this
.
setState
({
file
:
null
})
}
closeAlert
()
{
...
...
@@ -304,196 +309,196 @@ export default class CreateManagementDoc extends Component {
render
()
{
return
(
<
div
>
<
div
className
=
"test app-popup-show"
>
<
div
className
=
"popup-content background-white border-radius"
style
=
{{
borderRadius
:
8
}}
>
<
div
className
=
"popup-panel grid grid-2x main-color"
style
=
{{
height
:
64
,
borderTopRightRadius
:
8
,
borderTopLeftRadius
:
8
}}
>
<
div
className
=
"col-1"
style
=
{{
maxWidth
:
"inherit"
,
display
:
'flex'
,
alignItems
:
'center'
}}
>
<
div
className
=
"popup-title"
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
16
,
fontWeight
:
'bold'
}}
>
Create
<
/span
>
<
div
className
=
"test app-popup-show"
>
<
div
className
=
"popup-content background-white border-radius"
style
=
{{
borderRadius
:
8
}}
>
<
div
className
=
"popup-panel grid grid-2x main-color"
style
=
{{
height
:
64
,
borderTopRightRadius
:
8
,
borderTopLeftRadius
:
8
}}
>
<
div
className
=
"col-1"
style
=
{{
maxWidth
:
"inherit"
,
display
:
'flex'
,
alignItems
:
'center'
}}
>
<
div
className
=
"popup-title"
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
16
,
fontWeight
:
'bold'
}}
>
Create
<
/span
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"col-2 content-right"
style
=
{{
maxWidth
:
"inherit"
,
alignSelf
:
'center'
}}
>
<
button
type
=
"button"
className
=
"btn btn-circle btn-white"
onClick
=
{()
=>
this
.
props
.
onClickClose
()}
>
<
img
src
=
{
Images
.
close
}
/
>
<
/button
>
<
/div
>
<
/div
>
<
div
className
=
"grid grid-2x grid-mobile-none gap-15px"
style
=
{{
paddingLeft
:
20
,
paddingRight
:
20
,
paddingTop
:
20
}}
>
<
div
className
=
"column-1"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
perusahaan
}
// debug
clearOnEscape
id
=
"tipe"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
getPerusahaan
:
newInputValue
},
()
=>
this
.
clearMessage
())}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
error
=
{
this
.
state
.
errorPerusahaan
}
helperText
=
{
this
.
state
.
msgErrorPerusahaan
}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
label
=
"Company Name"
/>
}
value
=
{
this
.
state
.
getPerusahaan
}
/
>
<
div
className
=
"col-2 content-right"
style
=
{{
maxWidth
:
"inherit"
,
alignSelf
:
'center'
}}
>
<
button
type
=
"button"
className
=
"btn btn-circle btn-white"
onClick
=
{()
=>
this
.
props
.
onClickClose
()}
>
<
img
src
=
{
Images
.
close
}
/
>
<
/button
>
<
/div
>
<
/div
>
<
div
className
=
"column-2"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
document
}
// debug
clearOnEscape
id
=
"tipe"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
getDocument
:
newInputValue
},
()
=>
newInputValue
===
null
?
this
.
setState
({
disabledPeriode
:
false
})
:
newInputValue
.
document_category_name
===
'Manual Book TIA 4.0'
?
this
.
setState
({
disabledPeriode
:
true
},
()
=>
this
.
clearMessage
())
:
this
.
setState
({
disabledPeriode
:
false
},
()
=>
this
.
clearMessage
())
)}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
error
=
{
this
.
state
.
errorDocument
}
helperText
=
{
this
.
state
.
msgErrorDocument
}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
label
=
"Category"
/>
}
value
=
{
this
.
state
.
getDocument
}
/
>
<
div
className
=
"grid grid-2x grid-mobile-none gap-15px"
style
=
{{
paddingLeft
:
20
,
paddingRight
:
20
,
paddingTop
:
20
}}
>
<
div
className
=
"column-1"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
perusahaan
}
// debug
clearOnEscape
id
=
"tipe"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
getPerusahaan
:
newInputValue
},
()
=>
this
.
clearMessage
())}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
error
=
{
this
.
state
.
errorPerusahaan
}
helperText
=
{
this
.
state
.
msgErrorPerusahaan
}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
label
=
"Company Name"
/>
}
value
=
{
this
.
state
.
getPerusahaan
}
/
>
<
/div
>
<
/div
>
<
/div
>
{
/* {String(this.props.name).includes('Manual Book TIA') ? false : ( */
}
{
this
.
state
.
disabledPeriode
===
false
?
<
div
className
=
"column-1"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
listMonth
}
// debug
clearOnEscape
id
=
"month"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
monthId
:
newInputValue
},
()
=>
this
.
clearMessage
())}
style
=
{{
width
:
250
}}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
label
=
"Period Month"
margin
=
"normal"
style
=
{{
marginTop
:
7
}}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
error
=
{
this
.
state
.
errorMonth
}
helperText
=
{
this
.
state
.
msgErrorMonth
}
/>
}
value
=
{
this
.
state
.
monthId
}
/
>
<
div
className
=
"column-2"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
document
}
// debug
clearOnEscape
id
=
"tipe"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
getDocument
:
newInputValue
},
()
=>
newInputValue
===
null
?
this
.
setState
({
disabledPeriode
:
false
})
:
newInputValue
.
document_category_name
===
'Manual Book TIA 4.0'
?
this
.
setState
({
disabledPeriode
:
true
},
()
=>
this
.
clearMessage
())
:
this
.
setState
({
disabledPeriode
:
false
},
()
=>
this
.
clearMessage
())
)}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
error
=
{
this
.
state
.
errorDocument
}
helperText
=
{
this
.
state
.
msgErrorDocument
}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
label
=
"Category"
/>
}
value
=
{
this
.
state
.
getDocument
}
/
>
<
/div
>
<
/div
>
{
/* {String(this.props.name).includes('Manual Book TIA') ? false : ( */
}
{
this
.
state
.
disabledPeriode
===
false
?
<
div
className
=
"column-1"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
listMonth
}
// debug
clearOnEscape
id
=
"month"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
monthId
:
newInputValue
},
()
=>
this
.
clearMessage
())}
style
=
{{
width
:
250
}}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
label
=
"Period Month"
margin
=
"normal"
style
=
{{
marginTop
:
7
}}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
error
=
{
this
.
state
.
errorMonth
}
helperText
=
{
this
.
state
.
msgErrorMonth
}
/>
}
value
=
{
this
.
state
.
monthId
}
/
>
<
/div
>
<
/div
>
// )}
// {String(this.props.name).includes('Manual Book TIA') ? false : (
:
true
}
{
this
.
state
.
disabledPeriode
===
false
?
<
div
className
=
"column-2"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
listPeriode
}
// debug
clearOnEscape
id
=
"periode"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periode
:
newInputValue
},
()
=>
this
.
clearMessage
())}
style
=
{{
width
:
250
}}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
label
=
"Period Year"
margin
=
"normal"
style
=
{{
marginTop
:
7
}}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
error
=
{
this
.
state
.
errorPeriode
}
helperText
=
{
this
.
state
.
msgErrorPeriode
}
/>
}
value
=
{
this
.
state
.
periode
}
/
>
<
/div
>
<
/div
>
// )}
:
true
}
<
/div
>
// )}
// {String(this.props.name).includes('Manual Book TIA') ? false : (
:
true
}
{
this
.
state
.
disabledPeriode
===
false
?
<
div
className
=
"column-2"
>
<
div
style
=
{{
padding
:
10
,
borderRadius
:
5
}}
>
<
Autocomplete
{...
this
.
state
.
listPeriode
}
// debug
clearOnEscape
id
=
"periode"
onChange
=
{(
event
,
newInputValue
)
=>
this
.
setState
({
periode
:
newInputValue
},
()
=>
this
.
clearMessage
())}
style
=
{{
width
:
250
}}
renderInput
=
{(
params
)
=>
<
TextField
{...
params
}
label
=
"Period Year"
margin
=
"normal"
style
=
{{
marginTop
:
7
}}
InputProps
=
{{
...
params
.
InputProps
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
error
=
{
this
.
state
.
errorPeriode
}
helperText
=
{
this
.
state
.
msgErrorPeriode
}
/>
}
value
=
{
this
.
state
.
periode
}
/
>
<
/div
>
<
div
style
=
{{
paddingLeft
:
30
,
paddingRight
:
30
,
paddingTop
:
10
}}
>
<
UploadFile
type
=
{
this
.
state
.
uploadStatus
}
percentage
=
{
this
.
state
.
percentage
}
result
=
{
this
.
state
.
result
}
acceptedFiles
=
{[
"xls"
,
"xlsx"
,
"pdf"
,
"PDF"
,
"docx"
,
"doc"
,
"pptx"
,
"ppt"
,
"ods"
,
"odf"
,
"zip"
]}
intent
=
{
"management"
}
onHandle
=
{(
dt
)
=>
{
this
.
fileHandler
(
dt
)
this
.
setState
({
uploadStatus
:
'idle'
,
percentage
:
'0'
})
}}
onDelete
=
{(
e
)
=>
{
this
.
deleteFile
(
e
)
}}
onUpload
=
{()
=>
alert
(
'sukses'
)}
sizeUpload
=
{
Number
(
this
.
state
.
sizeUpload
)}
/
>
<
/div
>
// )}
:
true
}
<
/div
>
<
div
style
=
{{
paddingLeft
:
30
,
paddingRight
:
30
,
paddingTop
:
10
}}
>
<
UploadFile
type
=
{
this
.
state
.
uploadStatus
}
percentage
=
{
this
.
state
.
percentage
}
result
=
{
this
.
state
.
result
}
acceptedFiles
=
{[
"xls"
,
"xlsx"
,
"pdf"
,
"PDF"
,
"docx"
,
"doc"
,
"pptx"
,
"ppt"
,
"ods"
,
"odf"
]}
intent
=
{
"management"
}
onHandle
=
{(
dt
)
=>
{
this
.
fileHandler
(
dt
)
this
.
setState
({
uploadStatus
:
'idle'
,
percentage
:
'0'
})
}}
onDelete
=
{(
e
)
=>
{
this
.
deleteFile
(
e
)
}}
onUpload
=
{()
=>
alert
(
'sukses'
)}
sizeUpload
=
{
Number
(
this
.
state
.
sizeUpload
)}
/
>
<
/div
>
<
div
className
=
"margin-top-10px"
style
=
{{
paddingLeft
:
30
,
paddingRight
:
30
,
borderRadius
:
5
,
paddingBottom
:
20
}}
>
<
TextField
style
=
{{
width
:
'100%'
}}
id
=
"description"
label
=
"Description"
value
=
{
this
.
state
.
decription
}
inputProps
=
{{
min
:
0
,
style
:
{
fontSize
:
11
}
}}
<
div
className
=
"margin-top-10px"
style
=
{{
paddingLeft
:
30
,
paddingRight
:
30
,
borderRadius
:
5
,
paddingBottom
:
20
}}
>
<
TextField
style
=
{{
width
:
'100%'
}}
id
=
"description"
label
=
"Description"
value
=
{
this
.
state
.
decription
}
inputProps
=
{{
min
:
0
,
style
:
{
fontSize
:
11
}
}}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
name
=
"Description"
onChange
=
{(
e
)
=>
{
this
.
setState
({
description
:
e
.
target
.
value
})
this
.
clearMessage
()
}}
error
=
{
this
.
state
.
errorDesc
}
helperText
=
{
this
.
state
.
msgErrorDesc
}
>
<
/TextField
>
<
/div
>
<
div
className
=
"border-top grid grid-2x"
style
=
{{
height
:
56
,
backgroundColor
:
'#f5f5f5'
,
paddingLeft
:
20
,
paddingRight
:
20
}}
>
<
div
className
=
"column-1"
style
=
{{
alignSelf
:
'center'
}}
>
<
button
type
=
"button"
onClick
=
{()
=>
this
.
props
.
onClickClose
()}
InputLabelProps
=
{{
style
:
{
fontSize
:
11
,
color
:
'#7e8085'
}
}}
name
=
"Description"
onChange
=
{(
e
)
=>
{
this
.
setState
({
description
:
e
.
target
.
value
})
this
.
clearMessage
()
}}
error
=
{
this
.
state
.
errorDesc
}
helperText
=
{
this
.
state
.
msgErrorDesc
}
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
border
:
'solid 1px #354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
span
style
=
{{
color
:
'#354960'
,
fontSize
:
11
}}
>
Cancel
<
/span
>
<
/div
>
<
/button
>
<
/TextField
>
<
/div
>
<
div
className
=
"column-2"
style
=
{{
display
:
'flex'
,
justifyContent
:
'flex-end'
,
alignItems
:
'center'
}}
>
<
button
type
=
"button"
onClick
=
{()
=>
this
.
validasi
()}
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
backgroundColor
:
'#354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
>
Save
<
/span
>
<
/div
>
<
/button
>
<
div
className
=
"border-top grid grid-2x"
style
=
{{
height
:
56
,
backgroundColor
:
'#f5f5f5'
,
paddingLeft
:
20
,
paddingRight
:
20
}}
>
<
div
className
=
"column-1"
style
=
{{
alignSelf
:
'center'
}}
>
<
button
type
=
"button"
onClick
=
{()
=>
this
.
props
.
onClickClose
()}
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
border
:
'solid 1px #354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
span
style
=
{{
color
:
'#354960'
,
fontSize
:
11
}}
>
Cancel
<
/span
>
<
/div
>
<
/button
>
<
/div
>
<
div
className
=
"column-2"
style
=
{{
display
:
'flex'
,
justifyContent
:
'flex-end'
,
alignItems
:
'center'
}}
>
<
button
type
=
"button"
onClick
=
{()
=>
this
.
validasi
()}
>
<
div
style
=
{{
width
:
102
,
height
:
30
,
backgroundColor
:
'#354960'
,
borderRadius
:
5
,
alignItems
:
'center'
,
display
:
'flex'
,
justifyContent
:
'center'
}}
>
<
span
style
=
{{
color
:
'#fff'
,
fontSize
:
11
}}
>
Save
<
/span
>
<
/div
>
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
Snackbar
open
=
{
this
.
state
.
alert
}
autoHideDuration
=
{
6000
}
onClose
=
{()
=>
this
.
closeAlert
()}
>
<
Alert
onClose
=
{()
=>
this
.
closeAlert
()}
severity
=
{
this
.
state
.
tipeAlert
}
>
{
this
.
state
.
messageAlert
}
<
/Alert
>
<
/Snackbar
>
<
/div
>
<
Snackbar
open
=
{
this
.
state
.
alert
}
autoHideDuration
=
{
6000
}
onClose
=
{()
=>
this
.
closeAlert
()}
>
<
Alert
onClose
=
{()
=>
this
.
closeAlert
()}
severity
=
{
this
.
state
.
tipeAlert
}
>
{
this
.
state
.
messageAlert
}
<
/Alert
>
<
/Snackbar
>
<
/div
>
<
/div
>
)
}
...
...
src/container/HomePage.js
View file @
68e319a1
import
React
,
{
Component
}
from
'react'
;
import
{
Typography
,
MuiThemeProvider
,
createMuiTheme
}
from
'@material-ui/core'
;
import
{
Typography
,
MuiThemeProvider
,
createMuiTheme
,
Paper
}
from
'@material-ui/core'
;
import
MUIDataTable
from
"mui-datatables"
;
import
Images
from
'../assets/Images'
;
import
DonutChart
from
'react-d3-donut'
;
...
...
@@ -15,7 +15,13 @@ class HomePage extends Component {
super
(
props
)
this
.
state
=
{
userData
:
null
,
listDashboard
:
[]
listDashboard
:
[],
listMasterBudget
:
[
{
nama
:
'Triputra Agro Persada'
,
status
:
'complete'
},
{
nama
:
'Puninar Infinite Raya'
,
status
:
'complete'
},
{
nama
:
'Dharma Group'
,
status
:
'overdue'
},
{
nama
:
'Daya Group'
,
status
:
'open'
},
]
}
}
...
...
@@ -30,7 +36,15 @@ class HomePage extends Component {
}
}
})
this
.
getDashboard
()
api
.
create
().
checkApprover
().
then
(
response
=>
{
console
.
log
(
response
);
if
(
response
.
data
.
data
.
is_approver
===
true
)
{
this
.
setState
({
isApprover
:
true
},
()
=>
this
.
getDashboard
())
}
else
{
this
.
setState
({
isApprover
:
false
})
}
})
}
componentDidUpdate
()
{
...
...
@@ -64,7 +78,7 @@ class HomePage extends Component {
<
div
style
=
{{
display
:
'flex'
}}
>
<
Link
to
=
{{
pathname
:
`/home/master-budget/`
,
state
:
{
state
:
{
userType
:
'approver'
,
rawData
:
this
.
state
.
rawData
[
tableMeta
.
rowIndex
]
}
...
...
@@ -133,157 +147,189 @@ class HomePage extends Component {
}]
return
(
<
div
style
=
{{
flex
:
1
,
backgroundColor
:
'#f8f8f8'
}}
>
<
div
className
=
{
"main-color"
}
style
=
{{
height
:
78
,
flex
:
1
,
display
:
'flex'
,
alignItems
:
'center'
,
paddingLeft
:
20
}}
>
<
Typography
style
=
{{
fontSize
:
'24px'
,
color
:
'white'
}}
>
{
this
.
state
.
userData
===
null
?
''
:
`Welcome,
${
this
.
state
.
userData
.
fullname
}
!`
}
<
/Typography
>
<
/div
>
<
div
style
=
{{
flex
:
1
,
padding
:
20
,
width
:
'100%'
}}
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
fontWeight
:
'bold'
}}
>
Waiting
Your
Submission
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
flex
:
1
,
padding
:
20
,
width
:
'100%'
}}
>
{
this
.
state
.
isApprover
===
true
?
<
div
>
<
MuiThemeProvider
theme
=
{
getMuiTheme
()}
>
<
MUIDataTable
data
=
{
this
.
state
.
listDashboard
}
columns
=
{
columns
}
options
=
{
options
}
/
>
<
/MuiThemeProvider
>
<
/div
>
<
div
style
=
{{
marginTop
:
20
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
fontWeight
:
'bold'
}}
>
Status
Laporan
<
/Typography
>
<
div
style
=
{{
marginTop
:
10
,
display
:
'flex'
}}
>
<
div
style
=
{{
width
:
280
,
height
:
400
,
padding
:
20
,
backgroundColor
:
'white'
,
borderRadius
:
6
,
border
:
'solid 1px #c4c4c4'
,
marginRight
:
25
}}
>
<
Typography
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'24px'
,
fontWeight
:
'bold'
}}
>
Budget
Tahunan
-
2021
<
/Typography
>
<
div
style
=
{{
textAlign
:
'center'
}}
>
<
DonutChart
innerRadius
=
{
70
}
outerRadius
=
{
100
}
transition
=
{
true
}
pieClass
=
"pie1"
displayTooltip
=
{
true
}
strokeWidth
=
{
3
}
data
=
{
dataChart
}
/
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
marginTop
:
10
}}
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Submit
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
92.8
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
red
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>-
0.6
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
On
Time
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
6.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.7
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Overdue
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
1.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.1
%<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
{
"main-color"
}
style
=
{{
height
:
78
,
flex
:
1
,
display
:
'flex'
,
alignItems
:
'center'
,
paddingLeft
:
20
}}
>
<
Typography
style
=
{{
fontSize
:
'24px'
,
color
:
'white'
}}
>
{
this
.
state
.
userData
===
null
?
''
:
`Welcome,
${
this
.
state
.
userData
.
fullname
}
!`
}
<
/Typography
>
<
/div
>
<
div
style
=
{{
flex
:
1
,
padding
:
20
,
width
:
'100%'
}}
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
fontWeight
:
'bold'
}}
>
Waiting
Your
Submission
<
/Typography
>
<
/div
>
<
div
style
=
{{
width
:
280
,
height
:
400
,
padding
:
20
,
backgroundColor
:
'white'
,
borderRadius
:
6
,
border
:
'solid 1px #c4c4c4'
,
marginRight
:
25
}}
>
<
Typography
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'24px'
,
fontWeight
:
'bold'
}}
>
Laporan
Bulanan
-
Oct
2020
<
/Typography
>
<
div
style
=
{{
textAlign
:
'center'
}}
>
<
DonutChart
innerRadius
=
{
70
}
outerRadius
=
{
100
}
transition
=
{
true
}
pieClass
=
"pie5"
displayTooltip
=
{
true
}
strokeWidth
=
{
3
}
data
=
{
dataChart2
}
<
/div
>
<
div
style
=
{{
flex
:
1
,
padding
:
20
,
width
:
'100%'
}}
>
<
div
>
<
MuiThemeProvider
theme
=
{
getMuiTheme
()}
>
<
MUIDataTable
data
=
{
this
.
state
.
listDashboard
}
columns
=
{
columns
}
options
=
{
options
}
/
>
<
/
div
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
marginTop
:
10
}}
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Submit
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
92.8
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
red
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>-
0.6
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
On
Time
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
6.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.7
%<
/Typography
>
<
/
MuiThemeProvider
>
<
/div
>
<
div
style
=
{{
marginTop
:
20
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
fontWeight
:
'bold'
}}
>
Status
Laporan
<
/Typography
>
<
div
style
=
{{
marginTop
:
10
,
display
:
'flex'
}}
>
<
div
style
=
{{
width
:
280
,
height
:
400
,
padding
:
20
,
backgroundColor
:
'white'
,
borderRadius
:
6
,
border
:
'solid 1px #c4c4c4'
,
marginRight
:
25
}}
>
<
Typography
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'24px'
,
fontWeight
:
'bold'
}}
>
Budget
Tahunan
-
2021
<
/Typography
>
<
div
style
=
{{
textAlign
:
'center'
}}
>
<
DonutChart
innerRadius
=
{
70
}
outerRadius
=
{
100
}
transition
=
{
true
}
pieClass
=
"pie1"
displayTooltip
=
{
true
}
strokeWidth
=
{
3
}
data
=
{
dataChart
}
/
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
marginTop
:
10
}}
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Submit
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
92.8
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
red
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>-
0.6
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
On
Time
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
6.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.7
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Overdue
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
1.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.1
%<
/Typography
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Overdue
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
1.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.1
%<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
280
,
height
:
400
,
padding
:
20
,
backgroundColor
:
'white'
,
borderRadius
:
6
,
border
:
'solid 1px #c4c4c4'
,
}}
>
<
Typography
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'24px'
,
fontWeight
:
'bold'
,
height
:
71
}}
>
Lainnya
<
/Typography
>
<
div
style
=
{{
textAlign
:
'center'
}}
>
<
DonutChart
innerRadius
=
{
70
}
outerRadius
=
{
100
}
transition
=
{
true
}
pieClass
=
"pie2"
displayTooltip
=
{
true
}
strokeWidth
=
{
3
}
data
=
{
dataChart3
}
/
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
marginTop
:
10
}}
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Submit
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
92.8
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
red
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>-
0.6
%<
/Typography
>
<
div
style
=
{{
width
:
280
,
height
:
400
,
padding
:
20
,
backgroundColor
:
'white'
,
borderRadius
:
6
,
border
:
'solid 1px #c4c4c4'
,
marginRight
:
25
}}
>
<
Typography
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'24px'
,
fontWeight
:
'bold'
}}
>
Laporan
Bulanan
-
Oct
2020
<
/Typography
>
<
div
style
=
{{
textAlign
:
'center'
}}
>
<
DonutChart
innerRadius
=
{
70
}
outerRadius
=
{
100
}
transition
=
{
true
}
pieClass
=
"pie5"
displayTooltip
=
{
true
}
strokeWidth
=
{
3
}
data
=
{
dataChart2
}
/
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
marginTop
:
10
}}
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Submit
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
92.8
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
red
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>-
0.6
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
On
Time
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
6.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.7
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Overdue
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
1.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.1
%<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
On
Time
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
6.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.7
%<
/Typography
>
<
div
style
=
{{
width
:
280
,
height
:
400
,
padding
:
20
,
backgroundColor
:
'white'
,
borderRadius
:
6
,
border
:
'solid 1px #c4c4c4'
,
}}
>
<
Typography
style
=
{{
color
:
'#4b4b4b'
,
fontSize
:
'24px'
,
fontWeight
:
'bold'
,
height
:
71
}}
>
Lainnya
<
/Typography
>
<
div
style
=
{{
textAlign
:
'center'
}}
>
<
DonutChart
innerRadius
=
{
70
}
outerRadius
=
{
100
}
transition
=
{
true
}
pieClass
=
"pie2"
displayTooltip
=
{
true
}
strokeWidth
=
{
3
}
data
=
{
dataChart3
}
/
>
<
/div
>
<
div
style
=
{{
display
:
'flex'
,
width
:
'100%'
,
marginTop
:
10
}}
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Submit
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
92.8
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
red
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>-
0.6
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
On
Time
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
6.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.7
%<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Overdue
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
1.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.1
%<
/Typography
>
<
/div
>
<
div
style
=
{{
width
:
'33%'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'15px'
,
textAlign
:
'left'
}}
>
Overdue
<
/Typography
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'20px'
,
textAlign
:
'left'
}}
>
1.1
%<
/Typography
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
Images
.
green
}
/
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'14px'
,
textAlign
:
'left'
}}
>
0.1
%<
/Typography
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
:
<
div
>
<
div
className
=
{
"main-color"
}
style
=
{{
height
:
78
,
flex
:
1
,
display
:
'flex'
,
alignItems
:
'center'
,
paddingLeft
:
20
}}
>
<
Typography
style
=
{{
fontSize
:
'24px'
,
color
:
'white'
}}
>
{
this
.
state
.
userData
===
null
?
''
:
`Welcome,
${
this
.
state
.
userData
.
fullname
}
!`
}
<
/Typography
>
<
/div
>
<
div
style
=
{{
flex
:
1
,
padding
:
20
,
width
:
'100%'
}}
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
Typography
style
=
{{
color
:
'#656565'
,
fontSize
:
'16px'
,
fontWeight
:
'bold'
}}
>
Task
That
Must
be
Done
<
/Typography
>
<
/div
>
<
/div
>
<
div
style
=
{{
flex
:
1
,
padding
:
20
,
width
:
'100%'
}}
>
<
Paper
style
=
{{
width
:
400
,
padding
:
20
,
borderRadius
:
10
}}
>
<
Typography
style
=
{{
fontWeight
:
'bold'
,
textDecorationLine
:
'underline'
}}
>
Master
Budget
-
Oct
2020
(
1
/
4
)
<
/Typography
>
{
this
.
state
.
listMasterBudget
.
map
((
item
,
index
)
=>
{
return
(
<
div
style
=
{{
display
:
'flex'
,
justifyContent
:
'space-between'
,
marginTop
:
10
,
paddingLeft
:
10
}}
>
<
div
style
=
{{
display
:
'flex'
}}
>
<
img
src
=
{
item
.
status
===
"overdue"
?
Images
.
dotOverdue
:
item
.
status
===
"open"
?
Images
.
dotOpen
:
Images
.
dotDone
}
/
>
<
Typography
style
=
{{
marginLeft
:
10
,
color
:
'#5198ea'
,
fontSize
:
13
}}
>
{
item
.
nama
}
<
/Typography
>
<
/div
>
{
item
.
status
===
'overdue'
&&
(
<
div
style
=
{{
backgroundColor
:
'#f65a4c'
,
paddingRight
:
5
,
paddingLeft
:
5
,
borderRadius
:
5
,
alignSelf
:
'center'
}}
>
<
Typography
style
=
{{
fontSize
:
11
,
color
:
'#fff'
}}
>
Overdue
<
/Typography
>
<
/div
>
)}
<
/div
>
)
})}
<
/Paper
>
<
/div
>
<
/div
>
}
<
/div
>
);
}
...
...
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