Skip to content

T
Tia-dev
Commit 1de90b52 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'deni-dev(pc)' into 'master' 

Deni dev(pc)

See merge request !77
parents d9de9576 c8cfb27d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 369 additions and 37 deletions
package.json
View file @ 1de90b52
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
"react": "^16.13.1", "react": "^16.13.1",
"react-bootstrap": "^1.3.0", "react-bootstrap": "^1.3.0",
"react-d3-donut": "^1.1.2", "react-d3-donut": "^1.1.2",
"react-d3-speedometer": "^0.12.0",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-draggable-list": "^4.0.3", "react-draggable-list": "^4.0.3",
"react-dropzone": "^11.0.2", "react-dropzone": "^11.0.2",
......
src/api/index.js
View file @ 1de90b52
...@@ -84,6 +84,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -84,6 +84,7 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body) const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body)
const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body) const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body)
const checkUploadUnitBisnis = (body) => api.post('/business_unit/check_import', body) const checkUploadUnitBisnis = (body) => api.post('/business_unit/check_import', body)
const uploadUnitBisnis = (body) => api.post('/business_unit/import_business_unit', body)
// Perusahaan // Perusahaan
const getPerusahaan = () => api.get('company/get_all_company') const getPerusahaan = () => api.get('company/get_all_company')
...@@ -103,6 +104,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -103,6 +104,8 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const createUser = (body) => api.get('user/create_user', body) const createUser = (body) => api.get('user/create_user', body)
const updateUser = (body) => api.get('user/update_user', body) const updateUser = (body) => api.get('user/update_user', body)
const deleteUser = (userId) => api.get(`user/delete_user/${userId}`) const deleteUser = (userId) => api.get(`user/delete_user/${userId}`)
const changePassword = (body) => api.post('/user/change_password', body)
//Template //Template
const downloadTemplate = (fileName,fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`) const downloadTemplate = (fileName,fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
...@@ -150,7 +153,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -150,7 +153,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
updateUser, updateUser,
deleteUser, deleteUser,
downloadTemplate, downloadTemplate,
checkUploadUnitBisnis checkUploadUnitBisnis,
uploadUnitBisnis,
changePassword
} }
} }
......
src/assets/Images.js
View file @ 1de90b52
...@@ -30,6 +30,8 @@ const Images = { ...@@ -30,6 +30,8 @@ const Images = {
add: require('./add.svg'), add: require('./add.svg'),
searchBlack: require('./search-black.svg'), searchBlack: require('./search-black.svg'),
berhasil: require('./berhasil.svg'), berhasil: require('./berhasil.svg'),
up: require('./up.svg'),
down: require('./down.svg'),
//Image //Image
triputra: require('./triputra.png'), triputra: require('./triputra.png'),
......
src/assets/down.svg 0 → 100644
View file @ 1de90b52
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="23" viewBox="0 0 40 23">
<g fill="none" fill-rule="evenodd">
<path fill="#E45858" d="M26.841 0L37.507 0 37.507 10.667z" transform="matrix(1 0 0 -1 2 23)"/>
<path stroke="#E45858" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M34.848 2.849L20.991 16.234 12.912 8.435 0 20.757" transform="matrix(1 0 0 -1 2 23)"/>
</g>
</svg>
src/assets/up.svg 0 → 100644
View file @ 1de90b52
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="23" viewBox="0 0 40 23">
<g fill="none" fill-rule="evenodd">
<path fill="#7CD532" d="M26.841 0L37.507 0 37.507 10.667z" transform="translate(2)"/>
<path stroke="#7CD532" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M34.848 2.849L20.991 16.234 12.912 8.435 0 20.757" transform="translate(2)"/>
</g>
</svg>
src/container/Laporan/DashboardCAT.js 0 → 100644
View file @ 1de90b52
import React, { Component } from 'react'
import { Typography, MenuItem, TextField, AppBar, Paper, Tabs, Tab } from '@material-ui/core'
import ExceutiveScoreboard from './ExceutiveScoreboard'
export default class DashboardCAT extends Component {
constructor(props) {
super(props)
this.state = {
periode: '2020',
perusahaan: 'TAP Group',
tab: 0
}
}
selectTab = (event, newEvent) => {
this.setState({ tab: newEvent })
}
render() {
const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const periode = [
{ value: '2020', label: '2020' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
return (
<div style={{ height: this.props.height }}>
<div style={{ backgroundColor: '#354960', padding: 28 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>ON CHANGE CAT</Typography>
</div>
<div className="padding-20px">
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="perusahaan"
select
label="Perusahaan"
value={this.state.perusahaan}
onChange={(e) => this.setState({ perusahaan: e.target.value })}
>
{perusahaan.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="periode"
select
label="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>
<Paper style={{ marginTop: 20}}>
<AppBar position="static">
<Tabs indicatorColor="primary" value={this.state.tab} onChange={this.selectTab} aria-label="simple tabs example" style={{ backgroundColor: '#354960', borderColor: 'transparent' }}>
<Tab label="Executive Scoreboard" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="Strategy Map" style={{ color: '#fff', fontSize: 11 }} />
<Tab label="KPIs" style={{ color: '#fff', fontSize: 11 }} />
</Tabs>
</AppBar>
{this.state.tab == 0 ?
<ExceutiveScoreboard />
:
this.state.tab == 1 ?
<span>Testt</span>
:
<span>Test2</span>
}
</Paper>
</div>
</div>
)
}
}
src/container/Laporan/ExceutiveScoreboard.js 0 → 100644
View file @ 1de90b52
import React, { Component } from 'react'
import ReactSpeedometer from "react-d3-speedometer"
import { Paper, Typography } from '@material-ui/core'
import Images from '../../assets/Images'
export default class ExceutiveScoreboard extends Component {
constructor(props) {
super(props)
this.state = {
listDummy: [
{ judul: "Overall", kpi: 0, rank: 'BS', value: 3.67, status: 'up' },
{ judul: "Financial", kpi: 5, rank: 'BS', value: 3.67, status: 'up' },
{ judul: "Customer Perspective", kpi: 2, rank: 'B', value: 3.05, 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' },
],
selectIndex: null
}
}
render() {
let { selectIndex } = this.state
return (
<div style={{ padding: 20 }}>
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', flexFlow: 'wrap' }}>
{this.state.listDummy.map((item, index) => {
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 })}>
<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>
{index != 0 ?
<div>
<span style={{ textAlign: 'center', fontSize: '24px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>{item.kpi}</span>
<span style={{ textAlign: 'center', fontSize: '11px', color: selectIndex === index ? "#fff" : '#4b4b4b' }}>KPIs</span> </div> : null}
<div style={{ backgroundColor: index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7", textAlign: 'center', width: 40, height: 21 }}>
<Typography style={{ textAlign: 'center' }}>{item.rank}</Typography>
</div>
</div>
</div>
<ReactSpeedometer
maxSegmentLabels={0}
segmentColors={[
index === 2 ? "#7cd532" : index === 3 ? "#fcff00" : index === 4 ? "#00b440" : "#00b1f7",
"#d8d8d8"
]}
needleColor={this.state.selectIndex === index ? "#fff" : '#4b4b4b'}
value={item.value}
maxValue={5}
customSegmentStops={[0, item.value, 5]}
width={200}
height={140}
ringWidth={25}
textColor={selectIndex === index ? "#fff" : '#4b4b4b'}
/>
<div style={{ backgroundColor: 'transparent', display: 'flex', marginTop: 20, placeContent: 'center' }}>
<div style={{ textAlign: '-webkit-center' }}>
{item.status === "up" ?
<img src={Images.up} /> : <img src={Images.down} />}
<Typography style={{ fontSize: 16, color: this.state.selectIndex === index ? '#fff' : '#4b4b4b' }}>vs Last Month</Typography>
</div>
</div>
</div>
)
})}
</div>
</div>
)
}
}
src/container/MasterData/UnitBisnis.js
View file @ 1de90b52
...@@ -58,6 +58,7 @@ export default class UnitBisnis extends Component { ...@@ -58,6 +58,7 @@ export default class UnitBisnis extends Component {
let body = { let body = {
business_unit: payload business_unit: payload
} }
this.setState({ payload: body })
api.create().checkUploadUnitBisnis(body).then(response => { api.create().checkUploadUnitBisnis(body).then(response => {
// console.log(response); // console.log(response);
let dataRow = response.data.data.map((item, index) => { let dataRow = response.data.data.map((item, index) => {
...@@ -79,10 +80,13 @@ export default class UnitBisnis extends Component { ...@@ -79,10 +80,13 @@ export default class UnitBisnis extends Component {
let check = null let check = null
if (tableMeta.rowData[4] != null) { if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('business_unit_name')) check = tableMeta.rowData[4].findIndex((val) => val.field.includes('business_unit_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
} }
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ? {tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][check].message} data-for="unitbisnis"> <a data-tip={tableMeta.rowData[4][check].message} data-for="unitbisnis">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> : </a> :
...@@ -101,6 +105,9 @@ export default class UnitBisnis extends Component { ...@@ -101,6 +105,9 @@ export default class UnitBisnis extends Component {
let check = null let check = null
if (tableMeta.rowData[4] != null) { if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('start_date')) check = tableMeta.rowData[4].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
} }
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
...@@ -123,10 +130,13 @@ export default class UnitBisnis extends Component { ...@@ -123,10 +130,13 @@ export default class UnitBisnis extends Component {
let check = null let check = null
if (tableMeta.rowData[4] != null) { if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date')) check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
} }
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{tableMeta.rowData[4] != null && check > -1 ? {tableMeta.rowData[4] != null && check > -1 ?
<a data-tip={tableMeta.rowData[4][check].message} data-for="enddate"> <a data-tip={tableMeta.rowData[4][check].message} data-for="enddate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span> <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> : </a> :
...@@ -264,6 +274,14 @@ export default class UnitBisnis extends Component { ...@@ -264,6 +274,14 @@ export default class UnitBisnis extends Component {
} }
} }
uploadUnitBisnis() {
api.create().uploadUnitBisnis(this.state.payload).then(response => {
console.log(response)
this.getData()
this.setState({ visibleUnitBisnis: true })
})
}
render() { render() {
const columns = [{ const columns = [{
name: "Action", name: "Action",
...@@ -432,9 +450,28 @@ export default class UnitBisnis extends Component { ...@@ -432,9 +450,28 @@ export default class UnitBisnis extends Component {
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </div>
</button> </button>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> {this.state.buttonError === true ?
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <a data-tip={'Terdapat Error saat import data'} data-for="button">
</div> <button
type="button"
onClick={() => null}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</a> :
<button
type="button"
onClick={() => this.uploadUnitBisnis()}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>}
<ReactTooltip border={true} id="button" place="top" type="light" effect="solid" />
</div> </div>
</div> </div>
} }
......
src/container/Profile.js
View file @ 1de90b52
This diff is collapsed.
src/library/Array.js
View file @ 1de90b52
...@@ -33,7 +33,7 @@ const arraySide = [ ...@@ -33,7 +33,7 @@ const arraySide = [
{ {
img: 'beranda', img: 'beranda',
label: 'Dashboard CAT', label: 'Dashboard CAT',
path: 'beranda', path: 'dashboard-cat',
}, },
{ {
img: 'beranda', img: 'beranda',
......
src/router/homeRoutes.js
View file @ 1de90b52
...@@ -11,6 +11,7 @@ import Perusahaan from '../container/MasterData/Perusahaan/Perusahaan'; ...@@ -11,6 +11,7 @@ import Perusahaan from '../container/MasterData/Perusahaan/Perusahaan';
import UnitBisnis from '../container/MasterData/UnitBisnis' import UnitBisnis from '../container/MasterData/UnitBisnis'
import ItemLaporan from '../container/MasterData/ItemLaporan' import ItemLaporan from '../container/MasterData/ItemLaporan'
import Parameter from '../container/MasterData/Parameter/Parameter' import Parameter from '../container/MasterData/Parameter/Parameter'
import DashboardCAT from '../container/Laporan/DashboardCAT'
const routes = [ const routes = [
{ {
...@@ -53,6 +54,10 @@ const routes = [ ...@@ -53,6 +54,10 @@ const routes = [
path: "/home/parameter", path: "/home/parameter",
main: Parameter main: Parameter
}, },
{
path: "/home/dashboard-cat",
main: DashboardCAT
},
{ {
path: "*", path: "*",
main: screen404 main: screen404
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment