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 @@
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-d3-donut": "^1.1.2",
"react-d3-speedometer": "^0.12.0",
"react-dom": "^16.13.1",
"react-draggable-list": "^4.0.3",
"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/') =>
const updateUnitBisnis = (body) => api.post('/business_unit/update_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 uploadUnitBisnis = (body) => api.post('/business_unit/import_business_unit', body)
// Perusahaan
const getPerusahaan = () => api.get('company/get_all_company')
......@@ -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 updateUser = (body) => api.get('user/update_user', body)
const deleteUser = (userId) => api.get(`user/delete_user/${userId}`)
const changePassword = (body) => api.post('/user/change_password', body)
//Template
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/') =>
updateUser,
deleteUser,
downloadTemplate,
checkUploadUnitBisnis
checkUploadUnitBisnis,
uploadUnitBisnis,
changePassword
}
}
......
src/assets/Images.js
View file @ 1de90b52
......@@ -30,6 +30,8 @@ const Images = {
add: require('./add.svg'),
searchBlack: require('./search-black.svg'),
berhasil: require('./berhasil.svg'),
up: require('./up.svg'),
down: require('./down.svg'),
//Image
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 {
let body = {
business_unit: payload
}
this.setState({ payload: body })
api.create().checkUploadUnitBisnis(body).then(response => {
// console.log(response);
let dataRow = response.data.data.map((item, index) => {
......@@ -79,10 +80,13 @@ export default class UnitBisnis extends Component {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('business_unit_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<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">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
......@@ -101,6 +105,9 @@ export default class UnitBisnis extends Component {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
......@@ -123,10 +130,13 @@ export default class UnitBisnis extends Component {
let check = null
if (tableMeta.rowData[4] != null) {
check = tableMeta.rowData[4].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<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">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
......@@ -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() {
const columns = [{
name: "Action",
......@@ -432,9 +450,28 @@ export default class UnitBisnis extends Component {
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
<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>
{this.state.buttonError === true ?
<a data-tip={'Terdapat Error saat import data'} data-for="button">
<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>
}
......
src/container/Profile.js
View file @ 1de90b52
This diff is collapsed.
src/library/Array.js
View file @ 1de90b52
......@@ -33,7 +33,7 @@ const arraySide = [
{
img: 'beranda',
label: 'Dashboard CAT',
path: 'beranda',
path: 'dashboard-cat',
},
{
img: 'beranda',
......
src/router/homeRoutes.js
View file @ 1de90b52
......@@ -11,6 +11,7 @@ import Perusahaan from '../container/MasterData/Perusahaan/Perusahaan';
import UnitBisnis from '../container/MasterData/UnitBisnis'
import ItemLaporan from '../container/MasterData/ItemLaporan'
import Parameter from '../container/MasterData/Parameter/Parameter'
import DashboardCAT from '../container/Laporan/DashboardCAT'
const routes = [
{
......@@ -53,6 +54,10 @@ const routes = [
path: "/home/parameter",
main: Parameter
},
{
path: "/home/dashboard-cat",
main: DashboardCAT
},
{
path: "*",
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