Skip to content

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

Merge branch 'rifka' into 'master' 

updet bahasa apprv matrix

See merge request !157
parents 81c7a356 b7be1830
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 88 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ e2d2e141
......@@ -88,7 +88,7 @@ export default class ApprovalMatrix extends Component {
let columns = [
"ID",
{
name: "Tipe Persetujuan",
name: "Approval Type",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
......@@ -138,7 +138,7 @@ export default class ApprovalMatrix extends Component {
}
},
{
name: "Nama Pemberi Persetujuan",
name: "Approver Name",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
......@@ -188,7 +188,7 @@ export default class ApprovalMatrix extends Component {
}
},
{
name: "Berlaku Mulai",
name: "Start Date",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
......@@ -213,7 +213,7 @@ export default class ApprovalMatrix extends Component {
}
},
{
name: "Berakhir Hingga",
name: "End Date",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
......@@ -449,19 +449,19 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Tipe Persetujuan",
name: "Approval Type",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -473,19 +473,19 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Nama Pemberi Persetujuan",
name: "Approver Name",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -497,7 +497,7 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -509,19 +509,12 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
<span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
}]
const data = [
["", "1", "Yearly", "1", "John Doe", "-", "Aktif"],
["", "2", "Yearly", "2", "John Doe", "-", "Aktif"],
["", "3", "Yearly", "2", "John Doe", "AND", "Aktif"],
["", "4", "Yearly", "2", "John Doe", "AND", "Non Aktif"],
["", "5", "Yearly", "3", "John Doe", "-", "Non Aktif"],
]
return (
<div>
......@@ -532,9 +525,9 @@ export default class ApprovalMatrix extends Component {
{this.state.messageAlert}
</Alert>
</Snackbar>
<div class="main-color" style={{ height: 199, width: '100%' }} />
<div class="main-color" style={{ height: 195, width: '100%' }} />
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -118 }}>
<label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label>
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
<img src={Images.searchBlack} style={{ marginRight: 10 }} />
......@@ -594,7 +587,7 @@ export default class ApprovalMatrix extends Component {
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
<a data-tip={'Visualisasi'} data-for="visualisasi">
<a data-tip={'Visualization'} data-for="visualisasi">
<button
style={{
backgroundColor: 'transparent',
......@@ -610,7 +603,7 @@ export default class ApprovalMatrix extends Component {
</button>
</a>
<ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" />
<a data-tip={'Tambah'} data-for="create">
<a data-tip={'Add'} data-for="create">
<button
style={{
backgroundColor: 'transparent',
......@@ -622,7 +615,7 @@ export default class ApprovalMatrix extends Component {
}}
onClick={() => this.setState({ visibleCreate: true })}
>
<img src={Images.add} title="Tambah Approval Matrix" />
<img src={Images.add} />
</button>
</a>
<ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
......@@ -674,7 +667,7 @@ export default class ApprovalMatrix extends Component {
style={{ marginRight: 20 }}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
<span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
</div>
</button>
<button
......@@ -683,7 +676,7 @@ export default class ApprovalMatrix extends Component {
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>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div>
</button>
</div>
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ e2d2e141
......@@ -71,7 +71,7 @@ export default class CreateApprovalMatrix extends Component {
};
this.setState({ approvedBy: defaultProps, userData: response.data.data})
} else {
alert('Pemberi Persetujuan: ' +response.data.message)
alert('Approver: ' +response.data.message)
}
})
}
......@@ -92,7 +92,7 @@ export default class CreateApprovalMatrix extends Component {
};
this.setState({ types: typeProps, typeData: response.data.data })
} else {
alert('Tipe Persetujuan: ' +response.data.message)
alert('Approval Type: ' +response.data.message)
}
})
}
......@@ -157,22 +157,22 @@ export default class CreateApprovalMatrix extends Component {
validasi() {
if (R.isNil(this.state.typeId)) {
this.setState({ errorType: true, msgErrType: 'Tipe Persetujuan tidak boleh kosong' })
this.setState({ errorType: true, msgErrType: 'Approval Type is Required' })
}
else if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrOrder: 'Order tidak boleh kosong'})
this.setState({ errorOrder: true, msgErrOrder: 'Order is Required'})
}
else if (R.isNil(this.state.userId)) {
// return alert("Pemberi Persetujuan tidak boleh kosong");
this.setState({ errorApproved: true, msgErrApproved: 'Pemberi Persetujuan tidak boleh kosong' })
this.setState({ errorApproved: true, msgErrApproved: 'Approver is Required' })
}
else if (R.isNil(this.state.operatorId)) {
this.setState({ errorOperator: true, msgErrOperator: 'Operator tidak boleh kosong' })
this.setState({ errorOperator: true, msgErrOperator: 'Operator is Required' })
}
else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
this.setState({ errorStartDate: true, msgErrorStartDate: 'Start Date is Required' })
} else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
this.setState({ errorEndDate: true, msgErrorEndDate: 'End Date is Required' })
} else {
console.log('masuk');
let payload = {
......@@ -195,7 +195,7 @@ export default class CreateApprovalMatrix extends Component {
<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' }}>Tambah Data</span>
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Add Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
......@@ -243,7 +243,7 @@ export default class CreateApprovalMatrix extends Component {
renderInput={(params) =>
<TextField
{...params}
label="Tipe Persetujuan"
label="Approval Type"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorType}
helperText={this.state.msgErrType}
......@@ -299,7 +299,7 @@ export default class CreateApprovalMatrix extends Component {
debug
renderInput={(params) =>
<TextField {...params}
label="Pemberi Persetujuan"
label="Approver"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorApproved}
helperText={this.state.msgErrApproved}
......@@ -353,7 +353,7 @@ export default class CreateApprovalMatrix extends Component {
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
label="Start Date"
format="dd MMMM yyyy"
value={this.state.startDate == "" ? null : this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')}
......@@ -382,7 +382,7 @@ export default class CreateApprovalMatrix extends Component {
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
label="End Date"
format="dd MMMM yyyy"
value={this.state.endDate == "" ? null : this.state.endDate}
error={this.state.errorEndDate}
......@@ -416,7 +416,7 @@ export default class CreateApprovalMatrix extends Component {
id="status"
label="Status"
disabled
defaultValue={"Aktif"}
defaultValue={"Active"}
inputProps={{
style: {
fontSize: 11
......@@ -445,19 +445,19 @@ export default class CreateApprovalMatrix extends Component {
</div> */}
</div>
<div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0 }}>
<Typography style={{ fontSize: 11 }}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
<Typography style={{ fontSize: 11 }}>{`Created at : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
{/* <Typography style={{ fontSize: 11 }}>Diubah : Admin - 21 Jul 2020, 18:45</Typography> */}
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
<span style={{ color: '#354960', fontSize: 11 }} >Cancel</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div onClick={() => this.validasi()} style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div>
</div>
</div>
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ e2d2e141
......@@ -132,7 +132,7 @@ export default class EditApprovalMatrix extends Component {
};
this.setState({ types: typeProps, typeData: response.data.data, getTypes: index == -1 ? typeData[0]: typeData[index] })
} else {
alert('Tipe Persetujuan: ' +response.data.message)
alert('Approval Type: ' +response.data.message)
}
})
}
......@@ -176,21 +176,21 @@ export default class EditApprovalMatrix extends Component {
validasi() {
if (R.isNil(this.state.getTypes)) {
this.setState({ errorType: true, msgErrType: 'Tipe Persetujuan tidak boleh kosong' })
this.setState({ errorType: true, msgErrType: 'Approval Type is Required' })
}
else if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrOrder: 'Order tidak boleh kosong'})
this.setState({ errorOrder: true, msgErrOrder: 'Order is Required'})
}
else if (R.isNil(this.state.getApprovedBy)) {
this.setState({ errorApproved: true, msgErrApproved: 'Pemberi Persetujuan tidak boleh kosong' })
this.setState({ errorApproved: true, msgErrApproved: 'Approver is Required' })
}
else if (R.isNil(this.state.getOperators)) {
this.setState({ errorOperator: true, msgErrOperator: 'Operator tidak boleh kosong' })
this.setState({ errorOperator: true, msgErrOperator: 'Operator is Required' })
}
else if (R.isEmpty(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorStartDate: 'Tanggal Mulai tidak boleh kosong' })
this.setState({ errorStartDate: true, msgErrorStartDate: 'Start Date is Required' })
} else if (R.isEmpty(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorEndDate: 'Tanggal Berakhir tidak boleh kosong' })
this.setState({ errorEndDate: true, msgErrorEndDate: 'End Date is Required' })
} else {
console.log('masuk');
if (this.props.type == 'edit') {
......@@ -264,7 +264,7 @@ export default class EditApprovalMatrix extends Component {
onChange={(event, newInputValue) => this.setState({getTypes:newInputValue}, ()=> this.clearError())}
renderInput={(params) =>
<TextField {...params}
label="Tipe Persetujuan"
label="Approval Type"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorType}
helperText={this.state.msgErrType}
......@@ -319,7 +319,7 @@ export default class EditApprovalMatrix extends Component {
onChange={(event, newInputValue) => this.setState({getApprovedBy: newInputValue}, ()=> this.clearError())}
renderInput={(params) =>
<TextField {...params}
label="Pemberi Persetujuan"
label="Approver"
onChange={(e) => this.handleChange(e, '')}
error={this.state.errorApproved}
helperText={this.state.msgErrApproved}
......@@ -373,7 +373,7 @@ export default class EditApprovalMatrix extends Component {
<DatePicker
margin="normal"
id="startDate"
label="Berlaku Mulai"
label="Start Date"
format="dd MMMM yyyy"
value={this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')}
......@@ -402,7 +402,7 @@ export default class EditApprovalMatrix extends Component {
<DatePicker
margin="normal"
id="endDate"
label="Berlaku Hingga"
label="End Date"
format="dd MMMM yyyy"
error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate}
......@@ -478,11 +478,11 @@ export default class EditApprovalMatrix extends Component {
</div>
<div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0, borderRadius: 5 }}>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography>
<Typography style={{ fontSize: 11, width: '20%' }}>Created by</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
</div>
<div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography>
<Typography style={{ fontSize: 11, width: '20%' }}>Updated by</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
</div>
</div>
......@@ -490,12 +490,12 @@ export default class EditApprovalMatrix extends Component {
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
<span style={{ color: '#354960', fontSize: 11 }} >Cancel</span>
</div>
</div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div onClick={() => this.validasi()} style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div>
</div>
</div>
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ e2d2e141
......@@ -163,16 +163,16 @@ export default class VisualisasiAM extends Component {
<div class="main-color" style={{ height: 199, width: '100%' }} />
<div>
<div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi</label>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualization</label>
</div>
<div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25 }}>
<label style={{ color: '#51c6ea', width: '20%', fontSize: 11 }}>Master Data / Approval Matrix /
<span style={{ color: 'white', width: '20%', fontSize: 11 }}> Visualisasi</span>
<span style={{ color: 'white', width: '20%', fontSize: 11 }}> Visualization</span>
</label>
</div>
<div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Persetujuan</label>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Approval Hierarchy</label>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}>
<Autocomplete
{...this.state.types}
......@@ -181,7 +181,7 @@ export default class VisualisasiAM extends Component {
this.handleInputChange()
})}
disableClearable
renderInput={(params) => <TextField {...params} label="Tipe Persetujuan" margin="normal" />}
renderInput={(params) => <TextField {...params} label="Approval Type" margin="normal" />}
/>
</div>
<ReactDragListView {...dragProps}>
......@@ -202,14 +202,14 @@ export default class VisualisasiAM extends Component {
</div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
<span style={{ color: '#fff', fontSize: 11 }}>Back</span>
</div>
<div className="row" style={{ float: 'right', marginRight: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
<span style={{ color: '#354960', fontSize: 11 }} >Cancel</span>
</div>
<div onClick={() => this.handleSave()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
<span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div>
</div>
</div>
......
src/container/BudgetTahunan.js
View file @ e2d2e141
......@@ -7,6 +7,7 @@ import api from '../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../library/Utils';
import ProfitLoss from './BudgetTahunan/ProfitLoss';
import TaxPlanning from './BudgetTahunan/TaxPlanning';
export default class BudgetTahunan extends Component {
constructor(props) {
......@@ -89,6 +90,15 @@ export default class BudgetTahunan extends Component {
visibleFAM: false,
visibleTP: false
})
} else if (item === 'Tax Planning') {
this.setState({
visibleBudgetTahunan: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleFAM: false,
visibleTP: true
})
}
}
......@@ -282,6 +292,9 @@ export default class BudgetTahunan extends Component {
{this.state.visiblePL && (
<ProfitLoss />
)}
{this.state.visibleTP && (
<TaxPlanning />
)}
</div >
);
}
......
src/container/BudgetTahunan/TaxPlanning.js
View file @ e2d2e141
......@@ -2,6 +2,8 @@ import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
......@@ -253,35 +255,124 @@ export default class BalanceSheet extends Component {
["Trade Receivables - Third Party", "142,668", "77,480"],
]
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Budget Tahunan - Tax Planning</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', fontWeight: 'bold', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
<div style={{ height: this.props.height }}>
<div class="main-color" style={{ height: 279, width: '100%' }} />
<div>
<div style={{ alignItems: 'center', paddingLeft: 25, marginTop: -229 }} >
<Typography style={{ fontSize: '16px', color: 'white' }}>Master Budget - Tax Planning</Typography>
</div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: 45 }}>
{/* <label style={{ width: '20%', color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Budget - Tax Planning</label> */}
<div>
<Typography style={{ fontSize: '11px', color: 'white' }}>PT. XYZ</Typography>
<Typography style={{ fontSize: '11px', color: 'white' }}>Periode : 2021</Typography>
<Typography style={{ fontSize: '11px', color: 'white' }}>in IDR mn</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
<div style={{ width: '30%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<a data-tip={'Download Template'} data-for="template">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
padding: 0,
margin: 5
}}
onClick={() => this.downloadFile()}
>
<img src={Images.template} />
</button>
</a>
<ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
<a data-tip={'Upload'} data-for="upload">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding: 0,
margin: 5
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<img src={Images.upload} />
</button>
</a>
<ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
<a data-tip={'Download'} data-for="download">
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding: 0,
margin: 5
}}
onClick={() => this.downloadDataTable()}
>
<img src={Images.download} />
</button>
</a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
</div >
</div>
<div style={{ padding: 25, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
<div className="grid grid-2x" style={{ marginBottom: 20, paddingRight: 10, paddingLeft: 10 }}>
<div className="col-1">
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Kembali</Typography>
</div>
<div style={{ marginTop: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', marginRight: 20 }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Batal</Typography>
</div>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Simpan</Typography>
</div>
</div>
</Paper>
</div>
</div>
</div>
// <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
// <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
// <Typography style={{ fontSize: '16px', color: 'white' }}>Budget Tahunan - Tax Planning</Typography>
// </div>
// <div style={{ flex: 1, padding: 20, width: '100%' }}>
// {/* <Paper style={{ paddingTop: 10 }}>
// <div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
// <Typography style={{ fontSize: '12px', fontWeight: 'bold', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography>
// </div> */}
// <div style={{ padding: 20 }}>
// <div>
// <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
// <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
// <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
// </div>
// <div style={{ marginTop: 20, width: '100%' }}>
// <MuiThemeProvider theme={getMuiTheme()}>
// <MUIDataTable
// data={dataTable}
// columns={columns}
// options={options}
// />
// </MuiThemeProvider>
// </div>
// </div>
// {/* </Paper> */}
// </div>
// </div>
);
}
}
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