Skip to content

T
Tia-dev
Commit 839ada14 authored by faisalhamdi's avatar faisalhamdi
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into faisal

parents bc66de3f 8d91d7a4
Hide whitespace changes
Inline Side-by-side
Showing with 1395 additions and 465 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ 839ada14
...@@ -88,7 +88,7 @@ export default class ApprovalMatrix extends Component { ...@@ -88,7 +88,7 @@ export default class ApprovalMatrix extends Component {
let columns = [ let columns = [
"ID", "ID",
{ {
name: "Tipe Persetujuan", name: "Approval Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -138,7 +138,7 @@ export default class ApprovalMatrix extends Component { ...@@ -138,7 +138,7 @@ export default class ApprovalMatrix extends Component {
} }
}, },
{ {
name: "Nama Pemberi Persetujuan", name: "Approver Name",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -188,7 +188,7 @@ export default class ApprovalMatrix extends Component { ...@@ -188,7 +188,7 @@ export default class ApprovalMatrix extends Component {
} }
}, },
{ {
name: "Berlaku Mulai", name: "Start Date",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -213,7 +213,7 @@ export default class ApprovalMatrix extends Component { ...@@ -213,7 +213,7 @@ export default class ApprovalMatrix extends Component {
} }
}, },
{ {
name: "Berakhir Hingga", name: "End Date",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -449,19 +449,19 @@ export default class ApprovalMatrix extends Component { ...@@ -449,19 +449,19 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <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 > </div >
); );
} }
} }
}, },
{ {
name: "Tipe Persetujuan", name: "Approval Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <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 > </div >
); );
} }
...@@ -473,19 +473,19 @@ export default class ApprovalMatrix extends Component { ...@@ -473,19 +473,19 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <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 > </div >
); );
} }
} }
}, },
{ {
name: "Nama Pemberi Persetujuan", name: "Approver Name",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <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 > </div >
); );
} }
...@@ -497,7 +497,7 @@ export default class ApprovalMatrix extends Component { ...@@ -497,7 +497,7 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <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 > </div >
); );
} }
...@@ -509,19 +509,12 @@ export default class ApprovalMatrix extends Component { ...@@ -509,19 +509,12 @@ export default class ApprovalMatrix extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <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 > </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 ( return (
<div> <div>
...@@ -532,9 +525,9 @@ export default class ApprovalMatrix extends Component { ...@@ -532,9 +525,9 @@ export default class ApprovalMatrix extends Component {
{this.state.messageAlert} {this.state.messageAlert}
</Alert> </Alert>
</Snackbar> </Snackbar>
<div class="main-color" style={{ height: 199, width: '100%' }} /> <div class="main-color" style={{ height: 195, width: '100%' }} />
<div> <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> <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' }}> <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 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
...@@ -594,7 +587,7 @@ export default class ApprovalMatrix extends Component { ...@@ -594,7 +587,7 @@ export default class ApprovalMatrix extends Component {
</button> </button>
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <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 <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -610,7 +603,7 @@ export default class ApprovalMatrix extends Component { ...@@ -610,7 +603,7 @@ export default class ApprovalMatrix extends Component {
</button> </button>
</a> </a>
<ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" /> <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 <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -622,7 +615,7 @@ export default class ApprovalMatrix extends Component { ...@@ -622,7 +615,7 @@ export default class ApprovalMatrix extends Component {
}} }}
onClick={() => this.setState({ visibleCreate: true })} onClick={() => this.setState({ visibleCreate: true })}
> >
<img src={Images.add} title="Tambah Approval Matrix" /> <img src={Images.add} />
</button> </button>
</a> </a>
<ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
...@@ -674,7 +667,7 @@ export default class ApprovalMatrix extends Component { ...@@ -674,7 +667,7 @@ export default class ApprovalMatrix extends Component {
style={{ marginRight: 20 }} style={{ marginRight: 20 }}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
<button <button
...@@ -683,7 +676,7 @@ export default class ApprovalMatrix extends Component { ...@@ -683,7 +676,7 @@ export default class ApprovalMatrix extends Component {
style={{}} style={{}}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 839ada14
...@@ -71,7 +71,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -71,7 +71,7 @@ export default class CreateApprovalMatrix extends Component {
}; };
this.setState({ approvedBy: defaultProps, userData: response.data.data}) this.setState({ approvedBy: defaultProps, userData: response.data.data})
} else { } else {
alert('Pemberi Persetujuan: ' +response.data.message) alert('Approver: ' +response.data.message)
} }
}) })
} }
...@@ -92,7 +92,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -92,7 +92,7 @@ export default class CreateApprovalMatrix extends Component {
}; };
this.setState({ types: typeProps, typeData: response.data.data }) this.setState({ types: typeProps, typeData: response.data.data })
} else { } else {
alert('Tipe Persetujuan: ' +response.data.message) alert('Approval Type: ' +response.data.message)
} }
}) })
} }
...@@ -157,22 +157,22 @@ export default class CreateApprovalMatrix extends Component { ...@@ -157,22 +157,22 @@ export default class CreateApprovalMatrix extends Component {
validasi() { validasi() {
if (R.isNil(this.state.typeId)) { 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)) { 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)) { else if (R.isNil(this.state.userId)) {
// return alert("Pemberi Persetujuan tidak boleh kosong"); // 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)) { 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)) { 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)) { } 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 { } else {
console.log('masuk'); console.log('masuk');
let payload = { let payload = {
...@@ -195,7 +195,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -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="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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <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> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -243,7 +243,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -243,7 +243,7 @@ export default class CreateApprovalMatrix extends Component {
renderInput={(params) => renderInput={(params) =>
<TextField <TextField
{...params} {...params}
label="Tipe Persetujuan" label="Approval Type"
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
error={this.state.errorType} error={this.state.errorType}
helperText={this.state.msgErrType} helperText={this.state.msgErrType}
...@@ -299,7 +299,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -299,7 +299,7 @@ export default class CreateApprovalMatrix extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Pemberi Persetujuan" label="Approver"
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
error={this.state.errorApproved} error={this.state.errorApproved}
helperText={this.state.msgErrApproved} helperText={this.state.msgErrApproved}
...@@ -353,7 +353,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -353,7 +353,7 @@ export default class CreateApprovalMatrix extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Start Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.startDate == "" ? null : this.state.startDate} value={this.state.startDate == "" ? null : this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')} onChange={(e) => this.handleChange(e, 'start_date')}
...@@ -382,7 +382,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -382,7 +382,7 @@ export default class CreateApprovalMatrix extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="End Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.endDate == "" ? null : this.state.endDate} value={this.state.endDate == "" ? null : this.state.endDate}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -416,7 +416,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -416,7 +416,7 @@ export default class CreateApprovalMatrix extends Component {
id="status" id="status"
label="Status" label="Status"
disabled disabled
defaultValue={"Aktif"} defaultValue={"Active"}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11 fontSize: 11
...@@ -445,19 +445,19 @@ export default class CreateApprovalMatrix extends Component { ...@@ -445,19 +445,19 @@ export default class CreateApprovalMatrix extends Component {
</div> */} </div> */}
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0 }}> <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> */} {/* <Typography style={{ fontSize: 11 }}>Diubah : Admin - 21 Jul 2020, 18:45</Typography> */}
</div> </div>
</div> </div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}> <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <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" }}> <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> </div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}> <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" }}> <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> </div>
</div> </div>
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ 839ada14
...@@ -132,7 +132,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -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] }) this.setState({ types: typeProps, typeData: response.data.data, getTypes: index == -1 ? typeData[0]: typeData[index] })
} else { } else {
alert('Tipe Persetujuan: ' +response.data.message) alert('Approval Type: ' +response.data.message)
} }
}) })
} }
...@@ -176,21 +176,21 @@ export default class EditApprovalMatrix extends Component { ...@@ -176,21 +176,21 @@ export default class EditApprovalMatrix extends Component {
validasi() { validasi() {
if (R.isNil(this.state.getTypes)) { 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)) { 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)) { 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)) { 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)) { 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)) { } 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 { } else {
console.log('masuk'); console.log('masuk');
if (this.props.type == 'edit') { if (this.props.type == 'edit') {
...@@ -264,7 +264,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -264,7 +264,7 @@ export default class EditApprovalMatrix extends Component {
onChange={(event, newInputValue) => this.setState({getTypes:newInputValue}, ()=> this.clearError())} onChange={(event, newInputValue) => this.setState({getTypes:newInputValue}, ()=> this.clearError())}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Tipe Persetujuan" label="Approval Type"
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
error={this.state.errorType} error={this.state.errorType}
helperText={this.state.msgErrType} helperText={this.state.msgErrType}
...@@ -319,7 +319,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -319,7 +319,7 @@ export default class EditApprovalMatrix extends Component {
onChange={(event, newInputValue) => this.setState({getApprovedBy: newInputValue}, ()=> this.clearError())} onChange={(event, newInputValue) => this.setState({getApprovedBy: newInputValue}, ()=> this.clearError())}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Pemberi Persetujuan" label="Approver"
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
error={this.state.errorApproved} error={this.state.errorApproved}
helperText={this.state.msgErrApproved} helperText={this.state.msgErrApproved}
...@@ -373,7 +373,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -373,7 +373,7 @@ export default class EditApprovalMatrix extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Start Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.startDate} value={this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')} onChange={(e) => this.handleChange(e, 'start_date')}
...@@ -402,7 +402,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -402,7 +402,7 @@ export default class EditApprovalMatrix extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="End Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
error={this.state.errorEndDate} error={this.state.errorEndDate}
helperText={this.state.msgErrorEndDate} helperText={this.state.msgErrorEndDate}
...@@ -478,11 +478,11 @@ export default class EditApprovalMatrix extends Component { ...@@ -478,11 +478,11 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
<div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, paddingLeft: 0, borderRadius: 5 }}>
<div style={{ display: 'flex' }}> <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> <Typography style={{ fontSize: 11 }}>: {this.state.created}</Typography>
</div> </div>
<div style={{ display: 'flex' }}> <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> <Typography style={{ fontSize: 11 }}>: {this.state.updated == - null ? "" : this.state.updated}</Typography>
</div> </div>
</div> </div>
...@@ -490,12 +490,12 @@ export default class EditApprovalMatrix extends Component { ...@@ -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="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <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" }}> <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> </div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}> <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" }}> <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> </div>
</div> </div>
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ 839ada14
...@@ -163,16 +163,16 @@ export default class VisualisasiAM extends Component { ...@@ -163,16 +163,16 @@ export default class VisualisasiAM extends Component {
<div class="main-color" style={{ height: 199, width: '100%' }} /> <div class="main-color" style={{ height: 199, width: '100%' }} />
<div> <div>
<div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <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>
<div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25 }}> <div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25 }}>
<label style={{ color: '#51c6ea', width: '20%', fontSize: 11 }}>Master Data / Approval Matrix / <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> </label>
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <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 }}> <div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}>
<Autocomplete <Autocomplete
{...this.state.types} {...this.state.types}
...@@ -181,7 +181,7 @@ export default class VisualisasiAM extends Component { ...@@ -181,7 +181,7 @@ export default class VisualisasiAM extends Component {
this.handleInputChange() this.handleInputChange()
})} })}
disableClearable disableClearable
renderInput={(params) => <TextField {...params} label="Tipe Persetujuan" margin="normal" />} renderInput={(params) => <TextField {...params} label="Approval Type" margin="normal" />}
/> />
</div> </div>
<ReactDragListView {...dragProps}> <ReactDragListView {...dragProps}>
...@@ -202,14 +202,14 @@ export default class VisualisasiAM extends Component { ...@@ -202,14 +202,14 @@ export default class VisualisasiAM extends Component {
</div> </div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <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" }}> <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>
<div className="row" style={{ float: 'right', marginRight: 25 }}> <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" }}> <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 onClick={() => this.handleSave()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}> <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> </div>
</div> </div>
......
src/container/BudgetTahunan.js
View file @ 839ada14
...@@ -3,6 +3,11 @@ import { Typography, Paper, TextField, MenuItem } from '@material-ui/core'; ...@@ -3,6 +3,11 @@ import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
import MUIDataTable from 'mui-datatables'; import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images'; import Images from '../assets/Images';
import BalanceSheet from './BudgetTahunan/BalanceSheet'; import BalanceSheet from './BudgetTahunan/BalanceSheet';
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 { export default class BudgetTahunan extends Component {
constructor(props) { constructor(props) {
...@@ -12,20 +17,88 @@ export default class BudgetTahunan extends Component { ...@@ -12,20 +17,88 @@ export default class BudgetTahunan extends Component {
perusahaan: 'TAP Group', perusahaan: 'TAP Group',
revisi: '0', revisi: '0',
visibleBudgetTahunan: true, visibleBudgetTahunan: true,
visibleBS: false visibleBS: false,
listCompany: null,
company: null,
report_id: null,
visiblePL: false
} }
} }
clickDetail(item){ componentDidMount() {
this.getCompanyActive()
this.getReport()
}
getReport() {
api.create().getReportType().then(response => {
if (response.data) {
if (response.data.status === "success") {
let dataTable = response.data.data.map((item, index) => {
return [
index + 1,
item.report_name,
"",
item.report_id
]
})
this.setState({ dataTable })
}
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] })
} else {
alert(response.data.message)
}
})
}
clickDetail(item, id) {
this.setState({ report_id: id })
if (item === 'Balance Sheet') { if (item === 'Balance Sheet') {
this.setState({ this.setState({
visibleBudgetTahunan: false, visibleBudgetTahunan: false,
visibleBS: true, visibleBS: true,
visiblePL: false, visiblePL: false,
visibleCAT: false, visibleCAT: false,
visibleFAM: false, visibleFAM: false,
visibleTP: false,
})
} else if (item === 'Profit & Loss') {
this.setState({
visibleBudgetTahunan: false,
visibleBS: false,
visiblePL: true,
visibleCAT: false,
visibleFAM: false,
visibleTP: false visibleTP: false
}) })
} else if (item === 'Tax Planning') {
this.setState({
visibleBudgetTahunan: false,
visibleBS: false,
visiblePL: false,
visibleCAT: false,
visibleFAM: false,
visibleTP: true
})
} }
} }
...@@ -38,7 +111,7 @@ export default class BudgetTahunan extends Component { ...@@ -38,7 +111,7 @@ export default class BudgetTahunan extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{val == 'done' ? {val === "acc" ?
<img src={Images.ceklis} style={{ width: 31, height: 24 }} /> : <img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
null null
} }
...@@ -59,7 +132,7 @@ export default class BudgetTahunan extends Component { ...@@ -59,7 +132,7 @@ export default class BudgetTahunan extends Component {
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => this.clickDetail(tableMeta.rowData[1])} onClick={() => this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[3])}
> >
<Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography> <Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography>
</button> </button>
...@@ -145,20 +218,16 @@ export default class BudgetTahunan extends Component { ...@@ -145,20 +218,16 @@ export default class BudgetTahunan extends Component {
</TextField> </TextField>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<TextField <Autocomplete
style={{ width: 250, }} {...this.state.listCompany}
id="perusahaan" id="company"
select onChange={(event, newInputValue) => this.setState({ company: newInputValue })}
label="Perusahaan" debug
value={this.state.perusahaan} disableClearable
onChange={(e) => this.setState({ perusahaan: e.target.value })} style={{ width: 250 }}
> renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
{perusahaan.map((option) => ( value={this.state.company}
<MenuItem key={option.value} value={option.value}> />
{option.label}
</MenuItem>
))}
</TextField>
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<TextField <TextField
...@@ -179,7 +248,7 @@ export default class BudgetTahunan extends Component { ...@@ -179,7 +248,7 @@ export default class BudgetTahunan extends Component {
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<MUIDataTable <MUIDataTable
data={dataTable} data={this.state.dataTable}
columns={columns} columns={columns}
options={options} options={options}
/> />
...@@ -215,7 +284,16 @@ export default class BudgetTahunan extends Component { ...@@ -215,7 +284,16 @@ export default class BudgetTahunan extends Component {
)} )}
{this.state.visibleBS && ( {this.state.visibleBS && (
<BalanceSheet /> <BalanceSheet
report_id={this.state.report_id}
company_id={this.state.company.company_id}
/>
)}
{this.state.visiblePL && (
<ProfitLoss />
)}
{this.state.visibleTP && (
<TaxPlanning />
)} )}
</div > </div >
); );
......
src/container/BudgetTahunan/BalanceSheet.js
View file @ 839ada14
...@@ -2,6 +2,7 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,7 @@ import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core'; import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables'; import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import api from '../../api';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -21,6 +22,49 @@ const style2 = { ...@@ -21,6 +22,49 @@ const style2 = {
}; };
export default class BalanceSheet extends Component { export default class BalanceSheet extends Component {
constructor(props) {
super(props)
this.state = {
dataTable: [
["TOTAL ASSETS", "11,247,249", "10,702,196"],
["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"],
["Cash & Cash Equivalent", "1,464,571", "729,743"],
["Cash & Bank Balance", "938,707", "265,584"],
["Time & Call Deposit", "525,864", "464,159"],
["BI Deposit", "", ""],
["Marketable Securities", "150,250", "154,500"],
["Notes Receivable", "", ""],
["Accounts Receivable", "172,031", "97,112"],
["Trade Receivables - Third Party", "142,668", "77,480"],
]
}
}
componentDidMount(){
this.getItemHierarki()
console.log(this.props);
}
getItemHierarki(){
let payload = {
"report_id": this.props.report_id,
"company_id": this.props.company_id
}
api.create().getItemReportHierarki(payload).then(response => {
console.log(response);
})
}
handleChange(value, tableMeta) {
let data = this.state.dataTable
let a = data[tableMeta.rowIndex][tableMeta.columnIndex] = value
this.setState({
data: a
}, ()=> console.log(this.state.dataTable))
// let a = data[0].tableMeta.tableData[tableMeta.rowIndex] === value
// console.log(data)
}
render() { render() {
const columns = [{ const columns = [{
name: "Account", name: "Account",
...@@ -71,7 +115,6 @@ export default class BalanceSheet extends Component { ...@@ -71,7 +115,6 @@ export default class BalanceSheet extends Component {
</TableCell> </TableCell>
), ),
customBodyRender: (value, tableMeta, updateValue) => { customBodyRender: (value, tableMeta, updateValue) => {
return ( return (
<div style={{ textAlign: 'right' }}> <div style={{ textAlign: 'right' }}>
{tableMeta.rowIndex === 3 || tableMeta.rowIndex === 4 || tableMeta.rowIndex === 9 ? {tableMeta.rowIndex === 3 || tableMeta.rowIndex === 4 || tableMeta.rowIndex === 9 ?
...@@ -99,9 +142,12 @@ export default class BalanceSheet extends Component { ...@@ -99,9 +142,12 @@ export default class BalanceSheet extends Component {
type="text" type="text"
placeholder="" placeholder=""
value={value} value={value}
onChange={event => {
updateValue(event.target.value)
this.handleChange(event.target.value, tableMeta)
}}
/> />
} }
onChange={event => updateValue(event.target.value)}
/> />
</div> : </div> :
<span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span> <span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span>
...@@ -240,18 +286,7 @@ export default class BalanceSheet extends Component { ...@@ -240,18 +286,7 @@ export default class BalanceSheet extends Component {
} }
} }
] ]
const dataTable = [
["TOTAL ASSETS", "11,247,249", "10,702,196"],
["TOTAL CURRENT ASSETS", "2,647,647", "2,058,898"],
["Cash & Cash Equivalent", "1,464,571", "729,743"],
["Cash & Bank Balance", "938,707", "265584"],
["Time & Call Deposit", "525,864", "464,159"],
["BI Deposit", "", ""],
["Marketable Securities", "150,250", "154,500"],
["Notes Receivable", "", ""],
["Accounts Receivable", "172,031", "97,112"],
["Trade Receivables - Third Party", "142,668", "77,480"],
]
return ( return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}> <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 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
...@@ -272,7 +307,7 @@ export default class BalanceSheet extends Component { ...@@ -272,7 +307,7 @@ export default class BalanceSheet extends Component {
<div style={{ marginTop: 20, width: '100%' }}> <div style={{ marginTop: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable} data={this.state.dataTable}
columns={columns} columns={columns}
options={options} options={options}
/> />
...@@ -285,7 +320,7 @@ export default class BalanceSheet extends Component { ...@@ -285,7 +320,7 @@ export default class BalanceSheet extends Component {
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Kembali</Typography> <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Kembali</Typography>
</div> </div>
</div> </div>
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%'}}> <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 }}> <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> <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Batal</Typography>
</div> </div>
......
src/container/BudgetTahunan/ProfitLoss.js 0 → 100644
View file @ 839ada14
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';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
background: "white",
zIndex: 101,
};
const style2 = {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
};
export default class ProfitLoss extends Component {
render() {
const columns = [{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', width: 388 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 388 }}>
{tableMeta.rowIndex == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span>
:
tableMeta.rowIndex == 1 || tableMeta.rowIndex == 4 || tableMeta.rowIndex == 7 ?
<span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
<span style={{ fontSize: 12, marginLeft: 20 }}>{val}</span>
}
</div>
)
}
}
}, {
name: "Keterangan",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
},{
name: "31 Dec 2020 Actual",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
}, {
name: "January 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right' }}>
{tableMeta.rowIndex === 2 || tableMeta.rowIndex === 3 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
// <Input
// value={this.formatValue(value)}
// style={{}}
// inputProps={{
// style: {
// color: "#5198ea",
// fontSize: 12,
// textAlign: 'right'
// }
// }}
// disableUnderline={true}
// inputStyle={{ color: 'red' }}
// />
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={value}
/>
}
onChange={event => updateValue(event.target.value)}
/>
</div> :
<span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span>
}
</div>
)
}
}
}, {
name: "February 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "March 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "April 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "May 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "June 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2021 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2022 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2023 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}
]
const dataTable = [
["Ravenue", "", "11,247,249", "10,702,196"],
["Unit Bisnis/ Brand/ SubCo 1", "", "2,647,647", "2,058,898"],
["Sales Volume","Subco1", "1,464,571", "729,743"],
["Sales Price","Subco1", "1", "6"],
["Unit Bisnis/ Brand/ SubCo 2", "", "-", "-"],
["Sales Volume","Subco2", "-", "-"],
["Sales Price","Subco2", "-", "-"],
["Unit Bisnis/ Brand/ SubCo 3", "", "-", "-"],
["Sales Volume","Subco3", "-", "-"],
["Sales Price","Subco3", "-", "-"],
]
return (
<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' }}>Pengajuan Budget Tahunan</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Profit & Loss</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>
<div className="grid grid-2x">
<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>
<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>
</div>
</Paper>
</div>
</div>
);
}
}
src/container/BudgetTahunan/TaxPlanning.js
View file @ 839ada14
...@@ -2,6 +2,8 @@ import React, { Component } from 'react'; ...@@ -2,6 +2,8 @@ import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core'; import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables'; import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format'; import NumberFormat from 'react-number-format';
import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
...@@ -253,35 +255,124 @@ export default class BalanceSheet extends Component { ...@@ -253,35 +255,124 @@ export default class BalanceSheet extends Component {
["Trade Receivables - Third Party", "142,668", "77,480"], ["Trade Receivables - Third Party", "142,668", "77,480"],
] ]
return ( return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}> <div style={{ height: this.props.height }}>
<div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div class="main-color" style={{ height: 279, width: '100%' }} />
<Typography style={{ fontSize: '16px', color: 'white' }}>Budget Tahunan - Tax Planning</Typography> <div>
</div> <div style={{ alignItems: 'center', paddingLeft: 25, marginTop: -229 }} >
<div style={{ flex: 1, padding: 20, width: '100%' }}> <Typography style={{ fontSize: '16px', color: 'white' }}>Master Budget - Tax Planning</Typography>
<Paper style={{ paddingTop: 10 }}> </div>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} > <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: 45 }}>
<Typography style={{ fontSize: '12px', fontWeight: 'bold', color: '#4b4b4b', margin: 10 }}>Budget Tahunan</Typography> {/* <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>
<div style={{ padding: 20 }}> <div style={{ width: '30%', justifyContent: 'flex-end', display: 'flex', flexFlow: 'wrap' }}>
<div> <a data-tip={'Download Template'} data-for="template">
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography> <button
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography> style={{
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography> 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>
</div>
<div style={{ marginTop: 20, width: '100%' }}> <div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}> <div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', marginRight: 20 }}>
<MUIDataTable <Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Batal</Typography>
data={dataTable} </div>
columns={columns} <div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
options={options} <Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Simpan</Typography>
/>
</MuiThemeProvider>
</div> </div>
</div> </div>
</Paper> </div>
</div> </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>
); );
} }
} }
src/container/EmailVerification.js
View file @ 839ada14
...@@ -22,11 +22,11 @@ class EmailVerification extends Component { ...@@ -22,11 +22,11 @@ class EmailVerification extends Component {
<div style={{paddingTop: 20, paddingRight: 24, paddingLeft: 24, display: 'flex', flexDirection: 'column', width: 378, height: 300, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}> <div style={{paddingTop: 20, paddingRight: 24, paddingLeft: 24, display: 'flex', flexDirection: 'column', width: 378, height: 300, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
<img src={Images.berhasil} /> <img src={Images.berhasil} />
<Typography style={{textAlign: 'center', fontSize: 14, marginTop: 24, color: '#4b4b4b', fontFamily: 'Nunito Sans, sans-serif'}} >Link verifikasi berhasil terkirim. Silahkan cek email Anda.</Typography> <Typography style={{textAlign: 'center', fontSize: 14, marginTop: 24, color: '#4b4b4b', fontFamily: 'Nunito Sans, sans-serif'}} >We sent a recovery link to you. Please check your email.</Typography>
<Link to={{pathname: '/login'}} style={{textDecoration: 'none'}}> <Link to={{pathname: '/login'}} style={{textDecoration: 'none'}}>
<Button variant="contained" style={{ marginTop: 24, marginBottom: 20, width: 250, height: 30, borderRadius: 4 , backgroundColor: '#51c6ea', color: '#ffffff'}}> <Button variant="contained" style={{ marginTop: 24, marginBottom: 20, width: 250, height: 30, borderRadius: 4 , backgroundColor: '#51c6ea', color: '#ffffff'}}>
<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Tutup</Typography> <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Back To Login</Typography>
</Button> </Button>
</Link> </Link>
......
src/container/ForgotPassword.js
View file @ 839ada14
...@@ -39,9 +39,9 @@ class ForgotPassword extends Component { ...@@ -39,9 +39,9 @@ class ForgotPassword extends Component {
var isEmail = this.isEmail(this.state.email) var isEmail = this.isEmail(this.state.email)
if (this.state.email.trim() == "") { if (this.state.email.trim() == "") {
this.setState({ errorEmail: true, msgEmail: 'Email harus diisi!' }) this.setState({ errorEmail: true, msgEmail: 'Email cannot be empty!' })
} else if (!isEmail) { } else if (!isEmail) {
this.setState({ errorEmail: true, msgEmail: 'Format email tidak sesuai!' }) this.setState({ errorEmail: true, msgEmail: 'Email format is not correct!' })
} else { } else {
this.verification() this.verification()
} }
...@@ -103,12 +103,12 @@ class ForgotPassword extends Component { ...@@ -103,12 +103,12 @@ class ForgotPassword extends Component {
/> />
<Button name="submit" variant="contained" disabled={this.state.email.trim() === '' ? true : false} onClick={() => this.validateEmail()} style={{ marginTop: this.state.errorEmail ? (this.state.msgEmail.length > 45 ? 60 : 35) : 23, width: '100%', height: 30, borderRadius: 4, color: this.state.email.trim() === '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() === '' ? '#d8d8d8' : '#51c6ea' }}> <Button name="submit" variant="contained" disabled={this.state.email.trim() === '' ? true : false} onClick={() => this.validateEmail()} style={{ marginTop: this.state.errorEmail ? (this.state.msgEmail.length > 45 ? 60 : 35) : 23, width: '100%', height: 30, borderRadius: 4, color: this.state.email.trim() === '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() === '' ? '#d8d8d8' : '#51c6ea' }}>
<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography> <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Reset Password</Typography>
</Button> </Button>
<div style={{ marginTop: 24}}> <div style={{ marginTop: 24}}>
<span onClick={() => this.props.history.goBack()} style={{ color: '#51c6ea', cursor: 'pointer' }}> <span onClick={() => this.props.history.goBack()} style={{ color: '#51c6ea', cursor: 'pointer' }}>
<Typography style={{fontSize: 14}}>Kembali Ke Login</Typography> <Typography style={{fontSize: 14}}>Back To Login</Typography>
</span> </span>
</div> </div>
</div> </div>
......
src/container/Home.js
View file @ 839ada14
...@@ -17,7 +17,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon'; ...@@ -17,7 +17,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import DateFnsUtils from '@date-io/date-fns'; import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider } from "@material-ui/pickers"; import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import localeID from 'date-fns/locale/id'; import localeID from 'date-fns/locale/en-US';
import { import {
BrowserRouter as Router, BrowserRouter as Router,
...@@ -483,7 +483,9 @@ export default function MiniDrawer() { ...@@ -483,7 +483,9 @@ export default function MiniDrawer() {
<div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -45, display: 'flex', justifyContent: 'center' }}> <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -45, display: 'flex', justifyContent: 'center' }}>
<div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}> <div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}> <div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
{userPhoto === "" ? null : <img src={userPhoto} style={{ width: 72, height: 72, borderRadius: 50 }} />} <Link to={"profile"}>
{userPhoto === "" ? null : <img src={userPhoto} style={{ width: 72, height: 72, borderRadius: 50 }} />}
</Link>
</div> </div>
</div> </div>
...@@ -585,6 +587,20 @@ export default function MiniDrawer() { ...@@ -585,6 +587,20 @@ export default function MiniDrawer() {
</div> </div>
))} ))}
</List> </List>
{open &&
<div style={{ marginLeft: 20, marginTop: 5 }}>
<button
style={{
outline: 'none',
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
onClick={() => logout()}>
<Typography style={{ color: '#525355', fontSize: 14, fontFamily: 'Nunito Sans, sans-serif' }}>Logout</Typography>
</button>
</div>
}
</Drawer> </Drawer>
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}> <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div> <div>
......
src/container/Login.js
View file @ 839ada14
...@@ -65,11 +65,11 @@ class Login extends Component { ...@@ -65,11 +65,11 @@ class Login extends Component {
validateLogin() { validateLogin() {
var isEmail = this.isEmail(this.state.email) var isEmail = this.isEmail(this.state.email)
if (this.state.email.trim() == "") { if (this.state.email.trim() == "") {
this.setState({ errorEmail: true, msgEmail: 'Email harus diisi!' }) this.setState({ errorEmail: true, msgEmail: 'Email cannot be empty!' })
} else if (!isEmail) { } else if (!isEmail) {
this.setState({ errorEmail: true, msgEmail: 'Format email tidak sesuai!' }) this.setState({ errorEmail: true, msgEmail: 'Email format is not correct!' })
} else if (this.state.password.trim() == "") { } else if (this.state.password.trim() == "") {
this.setState({ errorPassword: true, msgPassword: 'Password harus diisi!' }) this.setState({ errorPassword: true, msgPassword: 'Password cannot be empty!' })
} else { } else {
this.login() this.login()
} }
...@@ -102,7 +102,7 @@ class Login extends Component { ...@@ -102,7 +102,7 @@ class Login extends Component {
} }
this.props.history.push('/home/beranda') this.props.history.push('/home/beranda')
} else { } else {
if (response.data.message == 'Kata sandi tidak sesuai.') { if (response.data.message == 'Incorrect Password.') {
this.setState({ errorPassword: true, msgPassword: response.data.message }) this.setState({ errorPassword: true, msgPassword: response.data.message })
} else { } else {
this.setState({ errorEmail: true, msgEmail: response.data.message }) this.setState({ errorEmail: true, msgEmail: response.data.message })
...@@ -169,7 +169,7 @@ class Login extends Component { ...@@ -169,7 +169,7 @@ class Login extends Component {
/> />
<TextField <TextField
label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Kata Sandi *</Typography>} label={<Typography style={{ fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Password *</Typography>}
id="password" id="password"
type={this.state.showPass ? 'text' : 'password'} type={this.state.showPass ? 'text' : 'password'}
name={"password"} name={"password"}
...@@ -199,7 +199,7 @@ class Login extends Component { ...@@ -199,7 +199,7 @@ class Login extends Component {
<div style={{ flexDirection: 'row', width: '100%', marginTop: this.state.errorPassword ? 26 : 16 }}> <div style={{ flexDirection: 'row', width: '100%', marginTop: this.state.errorPassword ? 26 : 16 }}>
<CustomCheckbox name="checked-remember" checked={this.state.rememberMe} onChange={() => this.setState({ rememberMe: !this.state.rememberMe })} /> <CustomCheckbox name="checked-remember" checked={this.state.rememberMe} onChange={() => this.setState({ rememberMe: !this.state.rememberMe })} />
<span style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Remember Me</span> <span style={{ color: 'rgba(0, 0, 0, 0.5)', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Remember Me</span>
<Link to={{ pathname: '/forgot-password' }} style={{ textDecoration: 'none' }}><span style={{ marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Lupa Kata Sandi?</span></Link> <Link to={{ pathname: '/forgot-password' }} style={{ textDecoration: 'none' }}><span style={{ marginLeft: 30, color: '#51c6ea', cursor: 'pointer', fontSize: 12, fontFamily: 'Nunito Sans, sans-serif' }}>Forgot Password?</span></Link>
</div> </div>
<button <button
type="submit" type="submit"
......
src/container/MasterData/Parameter/CreateParameter.js
View file @ 839ada14
...@@ -939,7 +939,7 @@ export default class CreateParameter extends Component { ...@@ -939,7 +939,7 @@ export default class CreateParameter extends Component {
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
defaultValue={"Aktif"} defaultValue={"Active"}
id="status" id="status"
label="Status" label="Status"
disabled disabled
......
src/container/MasterData/Parameter/Parameter.js
View file @ 839ada14
...@@ -665,7 +665,7 @@ export default class Parameter extends Component { ...@@ -665,7 +665,7 @@ export default class Parameter extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val === "Aktif" ? "Active" : "Inactive"}</span> <span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -681,7 +681,7 @@ export default class Parameter extends Component { ...@@ -681,7 +681,7 @@ export default class Parameter extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div className={"main-color"} style={{ height: 199, width: '100%' }} /> <div className={"main-color"} style={{ height: 195, width: '100%' }} />
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert} {this.state.messageAlert}
...@@ -689,7 +689,7 @@ export default class Parameter extends Component { ...@@ -689,7 +689,7 @@ export default class Parameter extends Component {
</Snackbar> </Snackbar>
{this.state.visibleParameter === true ? {this.state.visibleParameter === true ?
<div> <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={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Parameter</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Parameter</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' }}> <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 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
......
src/container/MasterData/Perusahaan/Perusahaan.js
View file @ 839ada14
...@@ -465,7 +465,7 @@ export default class Perusahaan extends Component { ...@@ -465,7 +465,7 @@ export default class Perusahaan extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div className={"main-color"} style={{ height: 199, width: '100%' }} /> <div className={"main-color"} style={{ height: 195, width: '100%' }} />
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert} {this.state.messageAlert}
...@@ -473,7 +473,7 @@ export default class Perusahaan extends Component { ...@@ -473,7 +473,7 @@ export default class Perusahaan extends Component {
</Snackbar> </Snackbar>
{this.state.visiblePerusahaan === true ? {this.state.visiblePerusahaan === true ?
<div> <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={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Company</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Company</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' }}> <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 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
......
src/container/MasterData/ReportItems.js
View file @ 839ada14
...@@ -103,9 +103,9 @@ export default class ReportItems extends Component { ...@@ -103,9 +103,9 @@ export default class ReportItems extends Component {
] ]
}) })
let columns = [ let columns = [
"Data Ke-", "Data",
{ {
name: "Jenis Laporan", name: "Report Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -130,7 +130,7 @@ export default class ReportItems extends Component { ...@@ -130,7 +130,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Perusahaan", name: "Company Name",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -180,7 +180,7 @@ export default class ReportItems extends Component { ...@@ -180,7 +180,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Deskripsi", name: "Description",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -280,7 +280,7 @@ export default class ReportItems extends Component { ...@@ -280,7 +280,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Tipe Data", name: "Data Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -330,7 +330,7 @@ export default class ReportItems extends Component { ...@@ -330,7 +330,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Nilai Seharusnya", name: "True Value",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -355,7 +355,7 @@ export default class ReportItems extends Component { ...@@ -355,7 +355,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Kondisi Jika Salah", name: "False Condition",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -380,7 +380,7 @@ export default class ReportItems extends Component { ...@@ -380,7 +380,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Berlaku Mulai", name: "Valid From",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -405,7 +405,7 @@ export default class ReportItems extends Component { ...@@ -405,7 +405,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Berakhir Hingga", name: "Valid To",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -550,7 +550,7 @@ export default class ReportItems extends Component { ...@@ -550,7 +550,7 @@ export default class ReportItems extends Component {
let url = window.URL.createObjectURL(res); let url = window.URL.createObjectURL(res);
let a = document.createElement('a'); let a = document.createElement('a');
a.href = url; a.href = url;
a.download = 'Item Report.xlsx'; a.download = 'Report Items.xlsx';
a.click(); a.click();
} }
} }
...@@ -621,31 +621,31 @@ export default class ReportItems extends Component { ...@@ -621,31 +621,31 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Jenis Laporan", name: "Report Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Perusahaan", name: "Company",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -657,19 +657,19 @@ export default class ReportItems extends Component { ...@@ -657,19 +657,19 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Deskripsi", name: "Description",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -681,7 +681,7 @@ export default class ReportItems extends Component { ...@@ -681,7 +681,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -693,7 +693,7 @@ export default class ReportItems extends Component { ...@@ -693,7 +693,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -705,19 +705,19 @@ export default class ReportItems extends Component { ...@@ -705,19 +705,19 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Tipe Data", name: "Data Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -729,7 +729,7 @@ export default class ReportItems extends Component { ...@@ -729,7 +729,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -747,7 +747,7 @@ export default class ReportItems extends Component { ...@@ -747,7 +747,7 @@ export default class ReportItems extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div className={"main-color"} style={{ height: 199, width: '100%' }} /> <div className={"main-color"} style={{ height: 195, width: '100%' }} />
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert} {this.state.messageAlert}
...@@ -755,8 +755,8 @@ export default class ReportItems extends Component { ...@@ -755,8 +755,8 @@ export default class ReportItems extends Component {
</Snackbar> </Snackbar>
{this.state.itemReport === true ? {this.state.itemReport === true ?
<div> <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={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Item Laporan</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Report Items</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' }}> <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 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase <InputBase
...@@ -810,7 +810,7 @@ export default class ReportItems extends Component { ...@@ -810,7 +810,7 @@ export default class ReportItems extends Component {
</button> </button>
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <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 <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -824,7 +824,7 @@ export default class ReportItems extends Component { ...@@ -824,7 +824,7 @@ export default class ReportItems extends Component {
</button> </button>
</a> </a>
<ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" />
<a data-tip={'Tambah'} data-for="tambah"> <a data-tip={'Add'} data-for="tambah">
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -857,49 +857,44 @@ export default class ReportItems extends Component { ...@@ -857,49 +857,44 @@ export default class ReportItems extends Component {
onClickClose={() => this.setState({ visualisasi: false, itemReport: true })} onClickClose={() => this.setState({ visualisasi: false, itemReport: true })}
height={this.props.height} height={this.props.height}
/> />
: :
<div style={{ height: this.props.height }}> <div>
<div style={{ height: 199, width: '100%' }} className={"main-color"} /> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<div> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
<div> </div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ padding: 25 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label> {this.state.dataLoaded && (
</div> <MuiThemeProvider theme={getMuiTheme()}>
<div style={{ padding: 25 }}> <MUIDataTable
{this.state.dataLoaded && ( theme={getMuiTheme()}
<MuiThemeProvider theme={getMuiTheme()}> data={this.state.rows}
<MUIDataTable columns={this.state.cols}
theme={getMuiTheme()} options={options}
data={this.state.rows} />
columns={this.state.cols} </MuiThemeProvider>
options={options} )}
/> </div>
</MuiThemeProvider> <div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
)} <button
</div> type="button"
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}> onClick={() => this.setState({ itemReport: true })}
<button style={{ marginRight: 20 }}
type="button" >
onClick={() => this.setState({ itemReport: true })} <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
style={{ marginRight: 20 }} <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
>
<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>
</div>
</button>
<button
type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadReportItems()}
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>
</div>
</div> </div>
</div> </button>
<button
type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadReportItems()}
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>
</div> </div>
</div>
} }
{this.state.add && ( {this.state.add && (
<CreateReportItems <CreateReportItems
......
src/container/MasterData/UnitBisnis.js
View file @ 839ada14
...@@ -379,7 +379,7 @@ export default class UnitBisnis extends Component { ...@@ -379,7 +379,7 @@ export default class UnitBisnis extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[3] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val === "Aktif" ? "Active" : "Inactive"}</span> <span style={{ color: tableMeta.rowData[3] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -395,7 +395,7 @@ export default class UnitBisnis extends Component { ...@@ -395,7 +395,7 @@ export default class UnitBisnis extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div style={{ height: 199, width: '100%' }} className={"main-color"} /> <div style={{ height: 195, width: '100%' }} className={"main-color"} />
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert} {this.state.messageAlert}
...@@ -403,7 +403,7 @@ export default class UnitBisnis extends Component { ...@@ -403,7 +403,7 @@ export default class UnitBisnis extends Component {
</Snackbar> </Snackbar>
{this.state.visibleUnitBisnis === true ? {this.state.visibleUnitBisnis === true ?
<div> <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={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Business Unit</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Business Unit</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' }}> <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 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
......
src/container/MasterData/formReportItems/CreateReportItems.js
View file @ 839ada14
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Typography } from '@material-ui/core'; import { TextField, Typography, Snackbar, withStyles } from '@material-ui/core';
import * as R from 'ramda'; import * as R from 'ramda';
import api from '../../../api'; import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
...@@ -7,6 +7,9 @@ import { titleCase } from '../../../library/Utils'; ...@@ -7,6 +7,9 @@ import { titleCase } from '../../../library/Utils';
import format from "date-fns/format"; import format from "date-fns/format";
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
import Images from '../../../assets/Images'; import Images from '../../../assets/Images';
import MuiAlert from '@material-ui/lab/Alert';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class CreateReportItems extends Component { export default class CreateReportItems extends Component {
constructor(props) { constructor(props) {
...@@ -53,7 +56,10 @@ export default class CreateReportItems extends Component { ...@@ -53,7 +56,10 @@ export default class CreateReportItems extends Component {
disabledFormula: true, disabledFormula: true,
disabledCondt: true, disabledCondt: true,
disabledValue: true, disabledValue: true,
options: ['WARNING', 'STOPPER'] options: ['WARNING', 'STOPPER'],
alert: false,
tipeAlert: '',
messageAlert: ''
} }
} }
...@@ -141,32 +147,32 @@ export default class CreateReportItems extends Component { ...@@ -141,32 +147,32 @@ export default class CreateReportItems extends Component {
validasi() { validasi() {
// alert('coba ya') // alert('coba ya')
if (R.isNil(this.state.reportType)) { if (R.isNil(this.state.reportType)) {
this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Jenis Laporan Harus Diisi'}) this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type cannot be empty.'})
} else if (R.isNil(this.state.company)){ } else if (R.isNil(this.state.company)){
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Perusahaan Harus Diisi'}) this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company cannot be empty.'})
} else if (R.isEmpty(this.state.order)) { } else if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order Harus Diisi' }) this.setState({ errorOrder: true, msgErrorOrder: 'Order cannot be empty.' })
} }
else if (R.isEmpty(this.state.description)) { else if (R.isEmpty(this.state.description)) {
this.setState({ errorDesc: true, msgErrorDesc: 'Deskripsi Harus Diisi' }) this.setState({ errorDesc: true, msgErrorDesc: 'Description cannot be empty.' })
} }
else if (R.isNil(this.state.InputType)) { else if (R.isNil(this.state.InputType)) {
this.setState({ errorTipeData: true, msgErrorTipeData: 'Tipe Data Harus Diisi' }) this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type cannot be empty' })
} }
else if (this.state.disabledFormula === false && R.isEmpty(this.state.formula)) { else if (this.state.disabledFormula === false && R.isEmpty(this.state.formula)) {
this.setState({ errorFormula: true, msgErrorFormula: 'Formula Harus Diisi' }) this.setState({ errorFormula: true, msgErrorFormula: 'Formula cannot be empty' })
} }
else if (this.state.disabledValue === false && R.isEmpty(this.state.realVal)) { else if (this.state.disabledValue === false && R.isEmpty(this.state.realVal)) {
this.setState({ errorRV: true, msgErrorRV: 'Nilai Seharusnya Harus Diisi' }) this.setState({ errorRV: true, msgErrorRV: 'True Value cannot be empty' })
} }
else if (this.state.disabledCondt === false && R.isEmpty(this.state.condition)) { else if (this.state.disabledCondt === false && R.isEmpty(this.state.condition)) {
this.setState({ errorCondition: true, msgErrorCondition: 'Kondisi Jika Salah Harus Diisi' }) this.setState({ errorCondition: true, msgErrorCondition: 'False Condition cannot be empty' })
} }
else if (R.isNil(this.state.startDate)) { else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong' }) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date cannot be empty' })
} }
else if (R.isNil(this.state.endDate)) { else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' }) this.setState({ errorEndDate: true, msgErrorED: 'End Date cannot be empty' })
} }
else { else {
this.addReportItems() this.addReportItems()
...@@ -196,22 +202,28 @@ export default class CreateReportItems extends Component { ...@@ -196,22 +202,28 @@ export default class CreateReportItems extends Component {
getInputType() { getInputType() {
api.create().getInputType().then((response) => { api.create().getInputType().then((response) => {
console.log(response.data) // console.log(response.data)
if (response.data.status === 'success') { if(response.data) {
let data = response.data.data
let inputData = data.map((item) => { if (response.data.status === 'success') {
return { let data = response.data.data
type_report_id: item.type_report_id, let inputData = data.map((item) => {
type_report_name: item.type_report_name return {
} type_report_id: item.type_report_id,
}) type_report_name: item.type_report_name
let defaultProps = { }
options: inputData, })
getOptionLabel: (option) => titleCase(option.type_report_name), let defaultProps = {
}; options: inputData,
this.setState({ listInputType: defaultProps, inputData: response.data.data }) getOptionLabel: (option) => titleCase(option.type_report_name),
};
this.setState({ listInputType: defaultProps, inputData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
// alert(response.data.message)
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -219,21 +231,30 @@ export default class CreateReportItems extends Component { ...@@ -219,21 +231,30 @@ export default class CreateReportItems extends Component {
getPerusahaan() { getPerusahaan() {
api.create().getPerusahaanActive().then((response) => { api.create().getPerusahaanActive().then((response) => {
// console.log(response) // console.log(response)
if (response.data.status === 'success') { if (response.data) {
let data = response.data.data if (response.data.status === 'success') {
let companyData = data.map((item) => { let data = response.data.data
return { let companyData = data.map((item) => {
company_id: item.company_id, return {
company_name: item.company_name company_id: item.company_id,
} company_name: item.company_name
}) }
let defaultProps = { })
options: companyData, companyData.push({
getOptionLabel: (option) => titleCase(option.company_name), company_id: 0,
}; company_name: 'Default'
this.setState({ listCompany: defaultProps, companyData: response.data.data }) })
let typeProps = {
options: companyData.sort((a, b) => a.company_id - b.company_id),
getOptionLabel: (option) => option.company_name,
};
this.setState({ listCompany: typeProps, companyData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
// alert(response.data.message)
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -241,21 +262,26 @@ export default class CreateReportItems extends Component { ...@@ -241,21 +262,26 @@ export default class CreateReportItems extends Component {
getReportType() { getReportType() {
api.create().getReportType().then((response) => { api.create().getReportType().then((response) => {
// console.log(response) // console.log(response)
if (response.data.status === 'success') { if (response.data) {
let data = response.data.data if (response.data.status === 'success') {
let reportTypeData = data.map((item) => { let data = response.data.data
return { let reportTypeData = data.map((item) => {
report_id: item.report_id, return {
report_name: item.report_name, report_id: item.report_id,
} report_name: item.report_name,
}) }
let defaultProps = { })
options: reportTypeData, let defaultProps = {
getOptionLabel: (option) => titleCase(option.report_name), options: reportTypeData,
}; getOptionLabel: (option) => titleCase(option.report_name),
this.setState({ listReportType: defaultProps, reportTypeData: response.data.data }) };
this.setState({ listReportType: defaultProps, reportTypeData: response.data.data })
} else {
// alert(response.data.message)
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -267,22 +293,28 @@ export default class CreateReportItems extends Component { ...@@ -267,22 +293,28 @@ export default class CreateReportItems extends Component {
"company_id": this.state.company.company_id "company_id": this.state.company.company_id
} }
api.create().getReportParent(payload).then((response) => { api.create().getReportParent(payload).then((response) => {
console.log(response) // console.log(response)
if (response.data.status === 'success') { if (response.data) {
let data = response.data.data
let parentData = data.map((item) => { if (response.data.status === 'success') {
return { let data = response.data.data
item_report_id: item.item_report_id, let parentData = data.map((item) => {
description: item.description return {
} item_report_id: item.item_report_id,
}) description: item.description
let defaultProps = { }
options: parentData, })
getOptionLabel: (option) => titleCase(option.description), let defaultProps = {
}; options: parentData,
this.setState({ listParent: defaultProps, parentData: response.data.data }) getOptionLabel: (option) => titleCase(option.description),
};
this.setState({ listParent: defaultProps, parentData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
// alert(response.data.message)
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -314,7 +346,7 @@ export default class CreateReportItems extends Component { ...@@ -314,7 +346,7 @@ export default class CreateReportItems extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <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> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -327,6 +359,11 @@ export default class CreateReportItems extends Component { ...@@ -327,6 +359,11 @@ export default class CreateReportItems extends Component {
</button> </button>
</div> </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 className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
...@@ -362,7 +399,7 @@ export default class CreateReportItems extends Component { ...@@ -362,7 +399,7 @@ export default class CreateReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Jenis Laporan" label="Report Type"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -390,7 +427,7 @@ export default class CreateReportItems extends Component { ...@@ -390,7 +427,7 @@ export default class CreateReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Perusahaan" label="Company"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -444,7 +481,7 @@ export default class CreateReportItems extends Component { ...@@ -444,7 +481,7 @@ export default class CreateReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="description" id="description"
label="Deskripsi" label="Description"
name="description" name="description"
value={this.state.description} value={this.state.description}
error={this.state.errorDesc} error={this.state.errorDesc}
...@@ -587,7 +624,7 @@ export default class CreateReportItems extends Component { ...@@ -587,7 +624,7 @@ export default class CreateReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Tipe Data" label="Data Type"
error={this.state.errorTipeData} error={this.state.errorTipeData}
helperText={this.state.msgErrorTipeData} helperText={this.state.msgErrorTipeData}
InputLabelProps={{ InputLabelProps={{
...@@ -642,7 +679,7 @@ export default class CreateReportItems extends Component { ...@@ -642,7 +679,7 @@ export default class CreateReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="realVal" id="realVal"
label="Nilai Seharusnya" label="True Value"
name="realVal" name="realVal"
disabled={this.state.disabledValue} disabled={this.state.disabledValue}
value={this.state.realVal} value={this.state.realVal}
...@@ -679,7 +716,7 @@ export default class CreateReportItems extends Component { ...@@ -679,7 +716,7 @@ export default class CreateReportItems extends Component {
<TextField {...params} <TextField {...params}
error={this.state.errorCondition} error={this.state.errorCondition}
helperText={this.state.msgErrorCondition} helperText={this.state.msgErrorCondition}
label="Kondisi Jika Salah" label="False Condition"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -700,7 +737,7 @@ export default class CreateReportItems extends Component { ...@@ -700,7 +737,7 @@ export default class CreateReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Valid From"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.startDate == "" ? null : this.state.startDate} value={this.state.startDate == "" ? null : this.state.startDate}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -732,7 +769,7 @@ export default class CreateReportItems extends Component { ...@@ -732,7 +769,7 @@ export default class CreateReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Valid To"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.endDate == "" ? null : this.state.endDate} value={this.state.endDate == "" ? null : this.state.endDate}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -767,7 +804,7 @@ export default class CreateReportItems extends Component { ...@@ -767,7 +804,7 @@ export default class CreateReportItems extends Component {
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
value={'Aktif'} defaultValue={"active"}
id="status" id="status"
label="Status" label="Status"
disabled disabled
...@@ -793,10 +830,10 @@ export default class CreateReportItems extends Component { ...@@ -793,10 +830,10 @@ export default class CreateReportItems extends Component {
<div className="column-1"> <div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11 }}>Dibuat :</Typography> <Typography style={{ fontSize: 11 }}>Created By :</Typography>
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11 }}>Diubah :</Typography> <Typography style={{ fontSize: 11 }}>Updated By :</Typography>
</div> </div>
</div> </div>
</div> </div>
...@@ -809,7 +846,7 @@ export default class CreateReportItems extends Component { ...@@ -809,7 +846,7 @@ export default class CreateReportItems extends Component {
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
...@@ -819,7 +856,7 @@ export default class CreateReportItems extends Component { ...@@ -819,7 +856,7 @@ export default class CreateReportItems extends Component {
onClick={() => this.validasi()} onClick={() => this.validasi()}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
......
src/container/MasterData/formReportItems/EditReportItems.js
View file @ 839ada14
...@@ -128,25 +128,25 @@ export default class EditReportItems extends Component { ...@@ -128,25 +128,25 @@ export default class EditReportItems extends Component {
validasi() { validasi() {
// alert('coba ya') // alert('coba ya')
if (R.isNil(this.state.reportType)){ if (R.isNil(this.state.reportType)){
this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Jenis Laporan Harus Diisi'}) this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type cannot be empty'})
} else if (R.isNil(this.state.company)){ } else if (R.isNil(this.state.company)){
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Perusahaan Harus Diisi'}) this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company cannot be empty'})
} else if (R.isEmpty(this.state.tempData.order)) { } else if (R.isEmpty(this.state.tempData.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order Harus Diisi' }) this.setState({ errorOrder: true, msgErrorOrder: 'Order cannot be empty.' })
} else if (R.isEmpty(this.state.tempData.description)) { } else if (R.isEmpty(this.state.tempData.description)) {
this.setState({ errorDesc: true, msgErrorDesc: 'Deskripsi Harus Diisi' }) this.setState({ errorDesc: true, msgErrorDesc: 'Description cannot be empty.' })
} else if (R.isNil(this.state.InputType)) { } else if (R.isNil(this.state.InputType)) {
this.setState({ errorTipeData: true, msgErrorTipeData: 'Tipe Data Harus Diisi' }) this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type cannot be empty' })
} else if ((this.state.InputType.type_report_name === 'Formula' && R.isEmpty(this.state.tempData.formula)) || (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.formula))) { } else if ((this.state.InputType.type_report_name === 'Formula' && R.isEmpty(this.state.tempData.formula)) || (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.formula))) {
this.setState({ errorFormula: true, msgErrorFormula: 'Formula Harus Diisi' }) this.setState({ errorFormula: true, msgErrorFormula: 'Formula cannot be empty' })
} else if (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.condition_it_should_be)) { } else if (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.condition_it_should_be)) {
this.setState({ errorRV: true, msgErrorRV: 'Nilai Seharusnya Harus Diisi' }) this.setState({ errorRV: true, msgErrorRV: 'True Value cannot be empty' })
} else if (this.state.InputType.type_report_name === 'Validation' && R.isNil(this.state.tempData.condition_if_wrong)) { } else if (this.state.InputType.type_report_name === 'Validation' && R.isNil(this.state.tempData.condition_if_wrong)) {
this.setState({ errorCondition: true, msgErrorCondition: 'Kondisi Jika Salah Harus Diisi' }) this.setState({ errorCondition: true, msgErrorCondition: 'False Condition cannot be empty' })
} else if (R.isNil(this.state.tempData.start_date)) { } else if (R.isNil(this.state.tempData.start_date)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Start Date Harus Diisi' }) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date cannot be empty' })
} else if (R.isNil(this.state.tempData.end_date)) { } else if (R.isNil(this.state.tempData.end_date)) {
this.setState({ errorEndDate: true, msgErrorED: 'End Date Harus Diisi' }) this.setState({ errorEndDate: true, msgErrorED: 'End Date cannot be empty' })
} else { } else {
this.updateReportItems() this.updateReportItems()
} }
...@@ -179,8 +179,14 @@ export default class EditReportItems extends Component { ...@@ -179,8 +179,14 @@ export default class EditReportItems extends Component {
api.create().getDetailReportItems(this.props.data[1]).then((response) => { api.create().getDetailReportItems(this.props.data[1]).then((response) => {
if (response.data) { if (response.data) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
this.setState({ tempData: response.data.data }, () => this.getInputType(), this.getPerusahaan(), this.getReportType(),) let data = response.data.data
console.log(response.data.data) this.setState({
tempData: response.data.data,
getCompanyID: data.company_id
}, () => this.getInputType(),
this.getPerusahaan(),
this.getReportType(),)
console.log(response.data.data)
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
} }
...@@ -230,13 +236,17 @@ export default class EditReportItems extends Component { ...@@ -230,13 +236,17 @@ export default class EditReportItems extends Component {
company_name: item.company_name company_name: item.company_name
} }
}) })
companyData.push({
company_id: 0,
company_name: 'Default'
})
let index = companyData.sort((a, b) => a.company_id - b.company_id).findIndex((val) => val.company_id == this.state.getCompanyID)
let defaultProps = { let defaultProps = {
options: companyData, options: companyData,
getOptionLabel: (option) => titleCase(option.company_name), getOptionLabel: (option) => option.company_name,
}; };
// let index = companyData.findIndex((val) => val.company_id === this.state.tempData.company_id)
let index = companyData.findIndex((val) => val.company_id === this.state.tempData.company_id) this.setState({ listCompany: defaultProps, companyData: response.data.data, company: index === -1 ? null : companyData[index] }, () => this.getParent())
this.setState({ listCompany: defaultProps, company: index === -1 ? null : companyData[index] }, () => this.getParent())
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
} }
...@@ -384,7 +394,7 @@ export default class EditReportItems extends Component { ...@@ -384,7 +394,7 @@ export default class EditReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Jenis Laporan" label="Report Type"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -411,7 +421,7 @@ export default class EditReportItems extends Component { ...@@ -411,7 +421,7 @@ export default class EditReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Perusahaan" label="Company"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -464,7 +474,7 @@ export default class EditReportItems extends Component { ...@@ -464,7 +474,7 @@ export default class EditReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="description" id="description"
label="Deskripsi" label="Description"
name="description" name="description"
error={this.state.errorDesc} error={this.state.errorDesc}
helperText={this.state.msgErrorDesc} helperText={this.state.msgErrorDesc}
...@@ -581,7 +591,7 @@ export default class EditReportItems extends Component { ...@@ -581,7 +591,7 @@ export default class EditReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Tipe Data" label="Data Type"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -633,7 +643,7 @@ export default class EditReportItems extends Component { ...@@ -633,7 +643,7 @@ export default class EditReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="condition_it_should_be" id="condition_it_should_be"
label="Nilai Seharusnya" label="True Value"
error={this.state.errorRV} error={this.state.errorRV}
helperText={this.state.msgErrorRV} helperText={this.state.msgErrorRV}
disabled={this.state.InputType == null ? true : (this.state.InputType.type_report_name === 'Validation' ? false : true)} disabled={this.state.InputType == null ? true : (this.state.InputType.type_report_name === 'Validation' ? false : true)}
...@@ -668,7 +678,7 @@ export default class EditReportItems extends Component { ...@@ -668,7 +678,7 @@ export default class EditReportItems extends Component {
options={this.state.options} options={this.state.options}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Kondisi Jika Salah" label="False Condition"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -690,7 +700,7 @@ export default class EditReportItems extends Component { ...@@ -690,7 +700,7 @@ export default class EditReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Valid From"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.start_date} value={this.state.tempData === null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -699,6 +709,19 @@ export default class EditReportItems extends Component { ...@@ -699,6 +709,19 @@ export default class EditReportItems extends Component {
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
...@@ -708,7 +731,7 @@ export default class EditReportItems extends Component { ...@@ -708,7 +731,7 @@ export default class EditReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Valid To"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.end_date} value={this.state.tempData === null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -718,6 +741,19 @@ export default class EditReportItems extends Component { ...@@ -718,6 +741,19 @@ export default class EditReportItems extends Component {
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
...@@ -750,18 +786,14 @@ export default class EditReportItems extends Component { ...@@ -750,18 +786,14 @@ export default class EditReportItems extends Component {
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingBottom: 20, paddingLeft: 20, paddingRight: 20 }}> <div className="margin-top-10px" style={{ padding: 20}}>
<div className="column-1"> <div style={{ display: 'flex' }}>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <Typography style={{ fontSize: 11, width: '13%' }}>Created By</Typography>
<div style={{ display: 'flex' }}> <Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.created}</Typography>
<Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography> </div>
<Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.created}</Typography> <div style={{ display: 'flex' }}>
</div> <Typography style={{ fontSize: 11, width: '13%' }}>Updated By</Typography>
<div style={{ display: 'flex' }}> <Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.updated}</Typography>
<Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.updated}</Typography>
</div>
</div>
</div> </div>
</div> </div>
...@@ -772,14 +804,14 @@ export default class EditReportItems extends Component { ...@@ -772,14 +804,14 @@ export default class EditReportItems extends Component {
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button onClick={() => this.validasi()}> <button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
......
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ 839ada14
...@@ -198,7 +198,7 @@ export default class VisualReportItems extends Component { ...@@ -198,7 +198,7 @@ export default class VisualReportItems extends Component {
return ( return (
<div> <div>
<button type="button" onClick={() => this.collapse(item.id)}>{collapseIcon ? (this.state.arrayCollapse.includes(item.id) ? <AddIcon /> : <RemoveIcon />) : null}</button> <button type="button" onClick={() => this.collapse(item.id)}>{collapseIcon ? (this.state.arrayCollapse.includes(item.id) ? <AddIcon /> : <RemoveIcon />) : null}</button>
<label style={{ marginLeft: collapseIcon ? 10 : 0 }}>{item.report_name}</label> <label style={{ marginLeft: collapseIcon ? 10 : 0 }}>{item.description}</label>
</div> </div>
) )
}; };
...@@ -210,11 +210,11 @@ export default class VisualReportItems extends Component { ...@@ -210,11 +210,11 @@ export default class VisualReportItems extends Component {
<div style={{ width: '100%' }} className={"main-color"} /> <div style={{ width: '100%' }} className={"main-color"} />
<div> <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: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Visualisasi Data</label> <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Data Visualization</label>
</div> </div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4' }}> <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4' }}>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Item Laporan</label> <label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Report Item Hierarchy</label>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<Autocomplete <Autocomplete
{...this.state.listReport} {...this.state.listReport}
...@@ -222,7 +222,7 @@ export default class VisualReportItems extends Component { ...@@ -222,7 +222,7 @@ export default class VisualReportItems extends Component {
onChange={(event, newInputValue) => this.setState({ report: newInputValue }, () => this.getItemHierarki())} onChange={(event, newInputValue) => this.setState({ report: newInputValue }, () => this.getItemHierarki())}
debug debug
disableClearable disableClearable
renderInput={(params) => <TextField {...params} label="Jenis Laporan" margin="normal" style={{ marginTop: 7 }} />} renderInput={(params) => <TextField {...params} label="Report Type" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.report} value={this.state.report}
/> />
</div> </div>
......
src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js
View file @ 839ada14
...@@ -396,7 +396,7 @@ export default class CreateUnitBisnis extends Component { ...@@ -396,7 +396,7 @@ export default class CreateUnitBisnis extends Component {
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5, backgroundColor: '#e8e8e8', }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5, backgroundColor: '#e8e8e8', }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
defaultValue={"Aktif"} defaultValue={"Active"}
id="status" id="status"
label="Status" label="Status"
disabled disabled
...@@ -425,7 +425,7 @@ export default class CreateUnitBisnis extends Component { ...@@ -425,7 +425,7 @@ export default class CreateUnitBisnis extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="unit" id="unit"
label="Unit Bisnis" label="Business Unit"
value={this.state.name} value={this.state.name}
inputProps={{ inputProps={{
style: { style: {
......
src/container/OperatingIndicator/OperatingIndicator.js 0 → 100644
View file @ 839ada14
import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../../assets/Images';
import BalanceSheet from '../BudgetTahunan/BalanceSheet';
export default class BudgetTahunan extends Component {
constructor(props) {
super(props)
this.state = {
periode: '2020',
perusahaan: 'TAP Group',
revisi: '0',
visibleBudgetTahunan: true,
visibleBalanceSheet: false
}
}
render() {
const columns = ["#", "Jenis Laporan",
{
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{val == 'done' ?
<img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
null
}
</div >
);
}
}
},
{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleBudgetTahunan: false, visibleBalanceSheet: true })}
>
<Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography>
</button>
</div >
);
}
}
}]
const dataTable = [
["1", "Balance Sheet", "done"],
["2", "Profit & Loss", ""],
["3", "CAT", "done"],
["4", "Fixed Assets Movement", ""],
["5", "Tax Planning", "done"],
["6", "Balance Sheet", "done"],
["7", "Profit & Loss", ""],
["8", "CAT", "done"],
["9", "Fixed Assets Movement", ""],
["10", "Tax Planning", "done"],
["11", "Balance Sheet", "done"],
["12", "Profit & Loss", "done"],
["13", "CAT", "done"],
["14", "Fixed Assets Movement", "done"],
["15", "Tax Planning", "done"],
]
const options = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5,
rowsPerPageOptions: [5, 25, 100],
search: false
}
const periode = [
{ value: '2020', label: '2020' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
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 revisi = [
{ value: '0', label: '0' },
{ value: '1', label: '1' },
]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
{this.state.visibleBudgetTahunan && (
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Operating Indicator</Typography>
</div>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Operating Indicator</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<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>
<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 }}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</div>
</div>
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
</div>
</div>
</Paper>
</div>
</div>
)}
{this.state.visibleBalanceSheet && (
<BalanceSheet />
)}
</div >
);
}
}
src/container/Otorisasi/User.js
View file @ 839ada14
...@@ -123,7 +123,7 @@ export default class UserRole extends Component { ...@@ -123,7 +123,7 @@ export default class UserRole extends Component {
let body = { let body = {
user: payload user: payload
} }
this.setState({ payload: body }) this.setState({ payload: body, rows: []})
api.create().checkUploadUser(body).then(response => { api.create().checkUploadUser(body).then(response => {
console.log(response); console.log(response);
if (response.data) { if (response.data) {
...@@ -142,7 +142,7 @@ export default class UserRole extends Component { ...@@ -142,7 +142,7 @@ export default class UserRole extends Component {
let columns = [ let columns = [
"Data Ke-", "Data Ke-",
"Nama Lengkap", "Full Name",
{ {
name: "Email", name: "Email",
options: { options: {
...@@ -334,7 +334,7 @@ export default class UserRole extends Component { ...@@ -334,7 +334,7 @@ export default class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
{/* {tableMeta.rowData[6] === "Aktif" ? */} {/* {tableMeta.rowData[6] === "Active" ? */}
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -359,18 +359,18 @@ export default class UserRole extends Component { ...@@ -359,18 +359,18 @@ export default class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span> <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
} }
}, { }, {
name: "Nama Lengkap", name: "Full Name",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span> <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
...@@ -381,7 +381,7 @@ export default class UserRole extends Component { ...@@ -381,7 +381,7 @@ export default class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span> <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
...@@ -392,18 +392,18 @@ export default class UserRole extends Component { ...@@ -392,18 +392,18 @@ export default class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span> <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
} }
}, { }, {
name: "Perusahaan", name: "Company",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span> <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
...@@ -414,7 +414,7 @@ export default class UserRole extends Component { ...@@ -414,7 +414,7 @@ export default class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span> <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
...@@ -423,14 +423,14 @@ export default class UserRole extends Component { ...@@ -423,14 +423,14 @@ export default class UserRole extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div className={"main-color"} style={{ height: 199, width: '100%' }} /> <div className={"main-color"} style={{ height: 195, width: '100%' }} />
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert} {this.state.messageAlert}
</Alert> </Alert>
</Snackbar> </Snackbar>
{this.state.visibleUser ? <div> {this.state.visibleUser ? <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={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - User</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - User</label>
{/* <div style={{ width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}> {/* <div style={{ width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
<div style={{ width: '50%', backgroundColor: 'white', padding: 10, borderRadius: 7.5 }}> <div style={{ width: '50%', backgroundColor: 'white', padding: 10, borderRadius: 7.5 }}>
...@@ -523,7 +523,7 @@ export default class UserRole extends Component { ...@@ -523,7 +523,7 @@ export default class UserRole extends Component {
</button> </button>
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
<a data-tip={'Tambah'} data-for="create"> <a data-tip={'Create'} data-for="create">
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
......
src/container/Otorisasi/User/AddUser.js
View file @ 839ada14
...@@ -158,17 +158,17 @@ export default class AddUser extends Component { ...@@ -158,17 +158,17 @@ export default class AddUser extends Component {
var isEmail = this.isEmail(this.state.email) var isEmail = this.isEmail(this.state.email)
if (R.isEmpty(this.state.fullname)) { if (R.isEmpty(this.state.fullname)) {
this.setState({ errorFullname: true, msgErrorFN: 'Nama Lengkap tidak boleh kosong' }) this.setState({ errorFullname: true, msgErrorFN: 'Full Name is Required' })
} else if (R.isEmpty(this.state.email)) { } else if (R.isEmpty(this.state.email)) {
this.setState({ errorEmail: true, msgErrorEM: 'Email tidak boleh kosong' }) this.setState({ errorEmail: true, msgErrorEM: 'Email is Required' })
} else if (!isEmail) { } else if (!isEmail) {
this.setState({ errorEmail: true, msgErrorEM: 'Format email tidak sesuai!' }) this.setState({ errorEmail: true, msgErrorEM: 'Email format not recognized!' })
} else if (R.isNil(this.state.role)) { } else if (R.isNil(this.state.role)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Name is Required' })
} else if (R.isNil(this.state.startDate)) { } else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong' }) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date is Required' })
} else if (R.isNil(this.state.endDate)) { } else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' }) this.setState({ errorEndDate: true, msgErrorED: 'End Date is Required' })
} }
// else if (this.state.privileges.length < 1) { // else if (this.state.privileges.length < 1) {
// alert('Hak Akses belum di pilih !!') // alert('Hak Akses belum di pilih !!')
...@@ -270,11 +270,39 @@ export default class AddUser extends Component { ...@@ -270,11 +270,39 @@ export default class AddUser extends Component {
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.company.findIndex((val) => val === item.id) let indexID = this.state.company.findIndex((val) => val === item.id)
let listCompany = this.state.listCompany
let company = this.state.company let company = this.state.company
if (indexID === -1) { if (indexID === -1) {
company.push(item.id) company.push(item.id)
if (item.parent !== null) {
let indexIDs = this.state.company.findIndex((val) => val === item.parent)
if (indexIDs === -1) {
company.push(item.parent)
}
}
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items,indexs) => {
this.handleItemClick(items)
})
}
}
} else { } else {
company.splice(indexID, 1) company.splice(indexID, 1)
if (item.parent !== null) {
let indexIDs = this.state.company.findIndex((val) => val === item.parent)
if (indexIDs !== -1) {
company.splice(indexIDs, 1)
}
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items,indexs) => {
this.handleItemClick(items)
})
}
}
}
} }
this.setState({ company }) this.setState({ company })
} }
...@@ -284,7 +312,7 @@ export default class AddUser extends Component { ...@@ -284,7 +312,7 @@ export default class AddUser extends Component {
if (pad !== undefined) { if (pad !== undefined) {
padding = pad padding = pad
} else { } else {
padding = 20 padding = 30
} }
return ( return (
<div> <div>
...@@ -294,7 +322,7 @@ export default class AddUser extends Component { ...@@ -294,7 +322,7 @@ export default class AddUser extends Component {
return ( return (
// <li> // <li>
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}> <Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: !R.isNil(data.children)? (data.children.length > 0? padding : padding + 30) : padding + 30}}>
{R.isNil(data.children) ? {R.isNil(data.children) ?
null null
: :
...@@ -324,7 +352,7 @@ export default class AddUser extends Component { ...@@ -324,7 +352,7 @@ export default class AddUser extends Component {
</span> </span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography> <Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div> </div>
{!R.isNil(data.children) && this.renderChildren(data, padding + 20)} {!R.isNil(data.children) && this.renderChildren(data, padding + 30)}
</Collapse> </Collapse>
// </li> // </li>
) )
...@@ -401,7 +429,7 @@ export default class AddUser extends Component { ...@@ -401,7 +429,7 @@ export default class AddUser extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -456,7 +484,7 @@ export default class AddUser extends Component { ...@@ -456,7 +484,7 @@ export default class AddUser extends Component {
style={{ width: '100%' , marginTop: 7}} style={{ width: '100%' , marginTop: 7}}
id="fullname" id="fullname"
name="fullname" name="fullname"
label="Nama Lengkap" label="Full Name"
value={this.state.fullname} value={this.state.fullname}
error={this.state.errorFullname} error={this.state.errorFullname}
helperText={this.state.msgErrorFN} helperText={this.state.msgErrorFN}
...@@ -549,7 +577,7 @@ export default class AddUser extends Component { ...@@ -549,7 +577,7 @@ export default class AddUser extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Start Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.startDate} value={this.state.startDate}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -582,7 +610,7 @@ export default class AddUser extends Component { ...@@ -582,7 +610,7 @@ export default class AddUser extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="End Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.endDate} value={this.state.endDate}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -622,7 +650,7 @@ export default class AddUser extends Component { ...@@ -622,7 +650,7 @@ export default class AddUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={'Aktif'} value={'Active'}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -656,7 +684,7 @@ export default class AddUser extends Component { ...@@ -656,7 +684,7 @@ export default class AddUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={'T'} value={'N'}
inputProps={{ inputProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -680,13 +708,13 @@ export default class AddUser extends Component { ...@@ -680,13 +708,13 @@ export default class AddUser extends Component {
</div> </div>
</div> </div>
</div> </div>
<div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> {/* <div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{ fontSize: 12 }}>{`Dibuat: `}</Typography> <Typography style={{ fontSize: 12 }}>{`Dibuat: `}</Typography>
<Typography style={{fontSize: 12}}>{`Diubah: `}</Typography> <Typography style={{fontSize: 12}}>{`Diubah: `}</Typography>
</div> </div> */}
<Divider style={{ margin: 20 }} /> <Divider style={{ margin: 20 }} />
<div style={{ paddingLeft: 20, paddingRight: 20 }}> <div style={{ paddingLeft: 20, paddingRight: 20 }}>
<h5>Otorisasi Perusahaan</h5> <h5>Authorization Company</h5>
<div style={{ paddingLeft: 10, overflow: 'scroll', height: '25vh' }}> <div style={{ paddingLeft: 10, overflow: 'scroll', height: '25vh' }}>
{this.state.listCompany.map((item, index) => { {this.state.listCompany.map((item, index) => {
return ( return (
...@@ -728,14 +756,14 @@ export default class AddUser extends Component { ...@@ -728,14 +756,14 @@ export default class AddUser extends Component {
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
<button onClick={() => this.props.onClickClose()}> <button onClick={() => this.props.onClickClose()}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button onClick={() => this.validasi()}> <button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
......
src/container/Otorisasi/User/EditUser.js
View file @ 839ada14
...@@ -166,17 +166,17 @@ export default class EditUser extends Component { ...@@ -166,17 +166,17 @@ export default class EditUser extends Component {
// console.log(this.state.tempData) // console.log(this.state.tempData)
if (R.isEmpty(this.state.tempData.fullname)) { if (R.isEmpty(this.state.tempData.fullname)) {
this.setState({ errorFullname: true, msgErrorFN: 'Nama Lengkap tidak boleh kosong' }) this.setState({ errorFullname: true, msgErrorFN: 'Full Name is Required' })
} else if (R.isEmpty(this.state.tempData.email)) { } else if (R.isEmpty(this.state.tempData.email)) {
this.setState({ errorEmail: true, msgErrorEM: 'Email tidak boleh kosong' }) this.setState({ errorEmail: true, msgErrorEM: 'Email is Required' })
} else if (!isEmail) { } else if (!isEmail) {
this.setState({ errorEmail: true, msgErrorEM: 'Format email tidak sesuai!' }) this.setState({ errorEmail: true, msgErrorEM: 'Email format not recognized!' })
} else if (R.isNil(this.state.role)) { } else if (R.isNil(this.state.role)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Name is Required' })
} else if (R.isNil(this.state.tempData.start_date)) { } else if (R.isNil(this.state.tempData.start_date)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong' }) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date is Required' })
} else if (R.isNil(this.state.tempData.end_date)) { } else if (R.isNil(this.state.tempData.end_date)) {
this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' }) this.setState({ errorEndDate: true, msgErrorED: 'End Date is Required' })
} }
// else if (this.state.privileges.length < 1) { // else if (this.state.privileges.length < 1) {
// alert('Hak Akses belum di pilih !!') // alert('Hak Akses belum di pilih !!')
...@@ -275,8 +275,35 @@ export default class EditUser extends Component { ...@@ -275,8 +275,35 @@ export default class EditUser extends Component {
let company = this.state.company let company = this.state.company
if (indexID === -1) { if (indexID === -1) {
company.push(item.id) company.push(item.id)
if (item.parent !== null) {
let indexIDs = this.state.company.findIndex((val) => val === item.parent)
if (indexIDs === -1) {
company.push(item.parent)
}
}
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items,indexs) => {
this.handleItemClick(items)
})
}
}
} else { } else {
company.splice(indexID, 1) company.splice(indexID, 1)
if (item.parent !== null) {
let indexIDs = this.state.company.findIndex((val) => val === item.parent)
if (indexIDs !== -1) {
company.splice(indexIDs, 1)
}
if (item.children !== null) {
if (item.children.length > 0) {
item.children.map((items,indexs) => {
this.handleItemClick(items)
})
}
}
}
} }
this.setState({ company }) this.setState({ company })
} }
...@@ -286,7 +313,7 @@ export default class EditUser extends Component { ...@@ -286,7 +313,7 @@ export default class EditUser extends Component {
if (pad !== undefined) { if (pad !== undefined) {
padding = pad padding = pad
} else { } else {
padding = 20 padding = 30
} }
return ( return (
<div> <div>
...@@ -296,7 +323,7 @@ export default class EditUser extends Component { ...@@ -296,7 +323,7 @@ export default class EditUser extends Component {
return ( return (
// <li> // <li>
<Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}> <Collapse key={index} timeout="auto" unmountOnExit in={item.collapse}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: R.isNil(data.children) ? (padding + 20) : padding }}> <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: !R.isNil(data.children)? (data.children.length > 0? padding : padding + 30) : padding + 30}}>
{R.isNil(data.children) ? {R.isNil(data.children) ?
null null
: :
...@@ -326,7 +353,7 @@ export default class EditUser extends Component { ...@@ -326,7 +353,7 @@ export default class EditUser extends Component {
</span> </span>
<Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography> <Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
</div> </div>
{!R.isNil(data.children) && this.renderChildren(data, padding + 20)} {!R.isNil(data.children) && this.renderChildren(data, padding + 30)}
</Collapse> </Collapse>
// </li> // </li>
) )
...@@ -403,7 +430,7 @@ export default class EditUser extends Component { ...@@ -403,7 +430,7 @@ export default class EditUser extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -458,7 +485,7 @@ export default class EditUser extends Component { ...@@ -458,7 +485,7 @@ export default class EditUser extends Component {
style={{ width: '100%', marginTop: 7 }} style={{ width: '100%', marginTop: 7 }}
id="fullname" id="fullname"
name="fullname" name="fullname"
label="Nama Lengkap" label="Full Name"
value={this.state.tempData === null ? '' : this.state.tempData.fullname} value={this.state.tempData === null ? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
...@@ -548,7 +575,7 @@ export default class EditUser extends Component { ...@@ -548,7 +575,7 @@ export default class EditUser extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Start Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.start_date} value={this.state.tempData === null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -580,7 +607,7 @@ export default class EditUser extends Component { ...@@ -580,7 +607,7 @@ export default class EditUser extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="End Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.end_date} value={this.state.tempData === null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -678,12 +705,12 @@ export default class EditUser extends Component { ...@@ -678,12 +705,12 @@ export default class EditUser extends Component {
</div> </div>
</div> </div>
<div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{ fontSize: 12 }}>{`Dibuat : ${this.state.tempData === null ? '' : this.state.tempData.created}`}</Typography> <Typography style={{ fontSize: 12 }}>{`Created by : ${this.state.tempData === null ? '' : this.state.tempData.created}`}</Typography>
<Typography style={{ fontSize: 12 }}>{`Diubah: ${this.state.tempData === null ? '' : this.state.tempData.updated}`}</Typography> <Typography style={{ fontSize: 12 }}>{`Updated by: ${this.state.tempData === null ? '' : this.state.tempData.updated}`}</Typography>
</div> </div>
<Divider style={{ margin: 20 }} /> <Divider style={{ margin: 20 }} />
<div style={{ paddingLeft: 20, paddingRight: 20 }}> <div style={{ paddingLeft: 20, paddingRight: 20 }}>
<h5>Otorisasi Perusahaan</h5> <h5>Authorization Company</h5>
<div style={{ paddingLeft: 10, overflow: 'scroll', height: '25vh' }}> <div style={{ paddingLeft: 10, overflow: 'scroll', height: '25vh' }}>
{this.state.listCompany.map((item, index) => { {this.state.listCompany.map((item, index) => {
return ( return (
...@@ -726,14 +753,14 @@ export default class EditUser extends Component { ...@@ -726,14 +753,14 @@ export default class EditUser extends Component {
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
<button onClick={() => this.props.onClickClose()}> <button onClick={() => this.props.onClickClose()}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button onClick={() => this.validasi()}> <button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
......
src/container/Otorisasi/UserRole.js
View file @ 839ada14
...@@ -157,7 +157,7 @@ class UserRole extends Component { ...@@ -157,7 +157,7 @@ class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[4] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -168,18 +168,18 @@ class UserRole extends Component { ...@@ -168,18 +168,18 @@ class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span> <span style={{ color: tableMeta.rowData[4] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
} }
}, { }, {
name: "Hak Akses", name: "Access Rights",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val + ' Modul'}</span> <span style={{ color: tableMeta.rowData[4] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val + ' Modul'}</span>
</div > </div >
); );
} }
...@@ -190,7 +190,7 @@ class UserRole extends Component { ...@@ -190,7 +190,7 @@ class UserRole extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[4] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -199,15 +199,15 @@ class UserRole extends Component { ...@@ -199,15 +199,15 @@ class UserRole extends Component {
return ( return (
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
{/* <Row> */} {/* <Row> */}
<div className={"main-color"} style={{ height: 199, width: '100%' }} /> <div className={"main-color"} style={{ height: 195, width: '100%' }} />
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}> <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}> <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert} {this.state.messageAlert}
</Alert> </Alert>
</Snackbar> </Snackbar>
<div> <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={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Role & Otorisasi</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Role & Authorization</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' }}> <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 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase <InputBase
...@@ -228,7 +228,7 @@ class UserRole extends Component { ...@@ -228,7 +228,7 @@ class UserRole extends Component {
</div> </div>
{/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */} {/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}> <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<a data-tip={'Tambah'} data-for="create"> <a data-tip={'Create'} data-for="create">
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
......
src/container/Otorisasi/UserRole/AddRole.js
View file @ 839ada14
...@@ -110,13 +110,13 @@ export default class AddRole extends Component { ...@@ -110,13 +110,13 @@ export default class AddRole extends Component {
validasi() { validasi() {
if (R.isEmpty(this.state.roleName)) { if (R.isEmpty(this.state.roleName)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Name is Required' })
} else if (R.isNil(this.state.startDate)) { } else if (R.isNil(this.state.startDate)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong' }) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date is Required' })
} else if (R.isNil(this.state.endDate)) { } else if (R.isNil(this.state.endDate)) {
this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' }) this.setState({ errorEndDate: true, msgErrorED: 'End Date is Required' })
} else if (this.state.privileges.length < 1) { } else if (this.state.privileges.length < 1) {
this.setState({ alert: true, messageAlert: 'Hak Akses belum di pilih !!', tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: 'You must choose the Access Rights!!', tipeAlert: 'warning' })
} else { } else {
this.addRole() this.addRole()
} }
...@@ -159,7 +159,8 @@ export default class AddRole extends Component { ...@@ -159,7 +159,8 @@ export default class AddRole extends Component {
menu_id: i.menu_id, menu_id: i.menu_id,
label: i.menu_name, label: i.menu_name,
sub_menu: this.parseChildren(i.sub_menu), sub_menu: this.parseChildren(i.sub_menu),
collapse: false collapse: false,
reference: i.reference
} }
}) })
return data return data
...@@ -209,8 +210,76 @@ export default class AddRole extends Component { ...@@ -209,8 +210,76 @@ export default class AddRole extends Component {
menu_id: item.menu_id, menu_id: item.menu_id,
button_id: [1, 2, 3] button_id: [1, 2, 3]
}) })
if (item.sub_menu.length > 0) {
item.sub_menu.map((items,indexs) => {
let indexIDs = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
if (indexIDs === -1) {
privileges.push({
menu_id: items.menu_id,
button_id: [1,2,3]
})
}
})
}
if (item.reference !== null && item.reference !== 13 && item.reference !== 1) {
let indexIDapp = this.state.application.findIndex((val) => val.menu_id === item.reference)
let indexIDset = this.state.setting.findIndex((val) => val.menu_id === item.reference)
let indexIDref = this.state.privileges.findIndex((val) => val.menu_id === item.reference)
let indexIDs = indexIDapp == -1? indexIDset : indexIDapp
let total = 0
let array = indexIDapp == -1? this.state.setting : this.state.application
array[indexIDs].sub_menu.map((items,indexs) => {
let indexIDsub = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
if (indexIDsub !== -1) {
total += 1
}
})
if (indexIDref == -1) {
privileges.push({
menu_id: item.reference,
button_id: [1,2,3]
})
} else {
if (total < 1) {
privileges.splice(indexIDref, 1)
}
}
}
} else { } else {
privileges.splice(indexID, 1) privileges.splice(indexID, 1)
if (item.sub_menu.length > 0) {
item.sub_menu.map((items,indexs) => {
let indexIDs = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
privileges.splice(indexIDs, 1)
})
}
if (item.reference !== null && item.reference !== 13 && item.reference !== 1) {
let indexIDapp = this.state.application.findIndex((val) => val.menu_id === item.reference)
let indexIDset = this.state.setting.findIndex((val) => val.menu_id === item.reference)
let indexIDref = this.state.privileges.findIndex((val) => val.menu_id === item.reference)
let indexIDs = indexIDapp == -1? indexIDset : indexIDapp
let total = 0
let array = indexIDapp == -1? this.state.setting : this.state.application
array[indexIDs].sub_menu.map((items,indexs) => {
let indexIDsub = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
if (indexIDsub !== -1) {
total += 1
}
})
if (indexIDref == -1) {
privileges.push({
menu_id: item.reference,
button_id: [1,2,3]
})
} else {
if (total < 1) {
privileges.splice(indexIDref, 1)
}
}
}
} }
this.setState({ privileges }) this.setState({ privileges })
} }
...@@ -283,7 +352,7 @@ export default class AddRole extends Component { ...@@ -283,7 +352,7 @@ export default class AddRole extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Create Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -369,7 +438,7 @@ export default class AddRole extends Component { ...@@ -369,7 +438,7 @@ export default class AddRole extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Start Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.startDate} value={this.state.startDate}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -402,7 +471,7 @@ export default class AddRole extends Component { ...@@ -402,7 +471,7 @@ export default class AddRole extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="End Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.endDate} value={this.state.endDate}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -442,7 +511,7 @@ export default class AddRole extends Component { ...@@ -442,7 +511,7 @@ export default class AddRole extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={'Aktif'} value={'Active'}
inputProps={{ inputProps={{
style: { style: {
...@@ -467,26 +536,26 @@ export default class AddRole extends Component { ...@@ -467,26 +536,26 @@ export default class AddRole extends Component {
</div> </div>
</div> </div>
</div> </div>
<div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> {/* <div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{ fontSize: 12 }}>{`Dibuat: `}</Typography> <Typography style={{ fontSize: 12 }}>{`Dibuat: `}</Typography>
<Typography style={{fontSize: 12}}>{`Diubah: `}</Typography> <Typography style={{fontSize: 12}}>{`Diubah: `}</Typography>
</div> </div> */}
<Divider style={{ margin: 20 }} /> <Divider style={{ margin: 20 }} />
<div style={{ paddingLeft: 20, paddingRight: 20 }}> <div style={{ paddingLeft: 20, paddingRight: 20 }}>
<h5>Hak Akses</h5> <h5>Access Rights</h5>
<div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{ backgroundColor: '#4b4b4b' }}> <div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{ backgroundColor: '#4b4b4b' }}>
<div className="column-1"> <div className="column-1">
<Typography style={{ fontSize: 12, color: 'white' }}>Otorisasi Modul</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Authorization Module</Typography>
</div> </div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px"> <div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<Typography style={{ fontSize: 12, color: 'white' }}>Lihat</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>View</Typography>
</div> </div>
<div className="column-2"> <div className="column-2">
<Typography style={{ fontSize: 12, color: 'white' }}>Tambah</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Create</Typography>
</div> </div>
<div className="column 3"> <div className="column 3">
<Typography style={{ fontSize: 12, color: 'white' }}>Ubah</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Edit</Typography>
</div> </div>
</div> </div>
</div> </div>
...@@ -578,7 +647,7 @@ export default class AddRole extends Component { ...@@ -578,7 +647,7 @@ export default class AddRole extends Component {
{this.state.setting.map((item, index) => { {this.state.setting.map((item, index) => {
return ( return (
<div> <div>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> {item.menu_id !== 23 && <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
<div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}>
{item.sub_menu.length > 0 && <span onClick={() => this.handleCollapseSetting(item)} style={{ marginRight: 2, marginLeft: -22 }}> {item.sub_menu.length > 0 && <span onClick={() => this.handleCollapseSetting(item)} style={{ marginRight: 2, marginLeft: -22 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
...@@ -616,7 +685,7 @@ export default class AddRole extends Component { ...@@ -616,7 +685,7 @@ export default class AddRole extends Component {
/> />
</div> </div>
</div> </div>
</div> </div>}
{item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => { {item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
return ( return (
<Collapse in={item.collapse} timeout="auto" unmountOnExit> <Collapse in={item.collapse} timeout="auto" unmountOnExit>
...@@ -668,7 +737,7 @@ export default class AddRole extends Component { ...@@ -668,7 +737,7 @@ export default class AddRole extends Component {
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
...@@ -679,7 +748,7 @@ export default class AddRole extends Component { ...@@ -679,7 +748,7 @@ export default class AddRole extends Component {
onClick={() => this.validasi()} onClick={() => this.validasi()}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
......
src/container/Otorisasi/UserRole/EditRole.js
View file @ 839ada14
...@@ -116,13 +116,13 @@ export default class EditRole extends Component { ...@@ -116,13 +116,13 @@ export default class EditRole extends Component {
validasi() { validasi() {
if (R.isEmpty(this.state.tempData.role_name)) { if (R.isEmpty(this.state.tempData.role_name)) {
this.setState({ errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong' }) this.setState({ errorRoleName: true, msgErrorRN: 'Role Name is Required' })
} else if (R.isNil(this.state.tempData.start_date)) { } else if (R.isNil(this.state.tempData.start_date)) {
this.setState({ errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong' }) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date is Required' })
} else if (R.isNil(this.state.tempData.end_date)) { } else if (R.isNil(this.state.tempData.end_date)) {
this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' }) this.setState({ errorEndDate: true, msgErrorED: 'End Date is Required' })
} else if (this.state.privileges.length < 1) { } else if (this.state.privileges.length < 1) {
this.setState({ alert: true, messageAlert: 'Hak Akses belum di pilih !!', tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: 'You must choose the Access Rights', tipeAlert: 'warning' })
} else { } else {
this.updateRole() this.updateRole()
} }
...@@ -131,12 +131,25 @@ export default class EditRole extends Component { ...@@ -131,12 +131,25 @@ export default class EditRole extends Component {
updateRole() { updateRole() {
// let startDate = format(this.state.tempData.start_date, 'yyyy-MM-dd') // let startDate = format(this.state.tempData.start_date, 'yyyy-MM-dd')
// let endDate = format(this.state.tempData.end_date, 'yyyy-MM-dd') // let endDate = format(this.state.tempData.end_date, 'yyyy-MM-dd')
let privileges = this.state.privileges
privileges.push({
menu_id: 23,
button_id: [1,2,3]
})
privileges.push({
menu_id: 24,
button_id: [1,2,3]
})
privileges.push({
menu_id: 25,
button_id: [1,2,3]
})
let payload = { let payload = {
"role_id": this.state.tempData.role_id, "role_id": this.state.tempData.role_id,
"role_name": this.state.tempData.role_name, "role_name": this.state.tempData.role_name,
"start_date": this.state.tempData.start_date, "start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date, "end_date": this.state.tempData.end_date,
"privileges": this.state.privileges "privileges": privileges
} }
// console.log(payload) // console.log(payload)
api.create().editRole(payload).then((response) => { api.create().editRole(payload).then((response) => {
...@@ -166,7 +179,8 @@ export default class EditRole extends Component { ...@@ -166,7 +179,8 @@ export default class EditRole extends Component {
menu_id: i.menu_id, menu_id: i.menu_id,
label: i.menu_name, label: i.menu_name,
sub_menu: this.parseChildren(i.sub_menu), sub_menu: this.parseChildren(i.sub_menu),
collapse: false collapse: false,
reference: i.reference
} }
}) })
return data return data
...@@ -210,14 +224,32 @@ export default class EditRole extends Component { ...@@ -210,14 +224,32 @@ export default class EditRole extends Component {
handleItemClick(item) { handleItemClick(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
console.log(item)
let privileges = this.state.privileges let privileges = this.state.privileges
if (indexID === -1) { if (indexID === -1) {
privileges.push({ privileges.push({
menu_id: item.menu_id, menu_id: item.menu_id,
button_id: [1, 2, 3] button_id: [1, 2, 3]
}) })
if (item.sub_menu.length > 0) {
item.sub_menu.map((items,indexs) => {
let indexIDs = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
if (indexIDs === -1) {
privileges.push({
menu_id: items.menu_id,
button_id: [1,2,3]
})
}
})
}
} else { } else {
privileges.splice(indexID, 1) privileges.splice(indexID, 1)
if (item.sub_menu.length > 0) {
item.sub_menu.map((items,indexs) => {
let indexIDs = this.state.privileges.findIndex((val) => val.menu_id === items.menu_id)
privileges.splice(indexIDs, 1)
})
}
} }
this.setState({ privileges }) this.setState({ privileges })
} }
...@@ -290,7 +322,7 @@ export default class EditRole extends Component { ...@@ -290,7 +322,7 @@ export default class EditRole extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -376,7 +408,7 @@ export default class EditRole extends Component { ...@@ -376,7 +408,7 @@ export default class EditRole extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Start Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.start_date} value={this.state.tempData === null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -409,7 +441,7 @@ export default class EditRole extends Component { ...@@ -409,7 +441,7 @@ export default class EditRole extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="End Date"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.end_date} value={this.state.tempData === null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -474,25 +506,25 @@ export default class EditRole extends Component { ...@@ -474,25 +506,25 @@ export default class EditRole extends Component {
</div> </div>
</div> </div>
<div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <div style={{ flexDirection: 'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{ fontSize: 12 }}>{`Dibuat : ${this.state.tempData === null ? '' : (this.state.tempData.created === null ? '-' : this.state.tempData.created)}`}</Typography> <Typography style={{ fontSize: 12 }}>{`Created by : ${this.state.tempData === null ? '' : (this.state.tempData.created === null ? '-' : this.state.tempData.created)}`}</Typography>
<Typography style={{ fontSize: 12 }}>{`Diubah: ${this.state.tempData === null ? '' : (this.state.tempData.updated === null ? '-' : this.state.tempData.updated)}`}</Typography> <Typography style={{ fontSize: 12 }}>{`Updated by: ${this.state.tempData === null ? '' : (this.state.tempData.updated === null ? '-' : this.state.tempData.updated)}`}</Typography>
</div> </div>
<Divider style={{ margin: 20 }} /> <Divider style={{ margin: 20 }} />
<div style={{ paddingLeft: 20, paddingRight: 20 }}> <div style={{ paddingLeft: 20, paddingRight: 20 }}>
<h5>Hak Akses</h5> <h5>Access Rights</h5>
<div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{ backgroundColor: '#4b4b4b' }}> <div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{ backgroundColor: '#4b4b4b' }}>
<div className="column-1"> <div className="column-1">
<Typography style={{ fontSize: 12, color: 'white' }}>Otorisasi Modul</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Authorization Module</Typography>
</div> </div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px"> <div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<Typography style={{ fontSize: 12, color: 'white' }}>Lihat</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>View</Typography>
</div> </div>
<div className="column-2"> <div className="column-2">
<Typography style={{ fontSize: 12, color: 'white' }}>Tambah</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Create</Typography>
</div> </div>
<div className="column 3"> <div className="column 3">
<Typography style={{ fontSize: 12, color: 'white' }}>Ubah</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Edit</Typography>
</div> </div>
</div> </div>
</div> </div>
...@@ -503,7 +535,7 @@ export default class EditRole extends Component { ...@@ -503,7 +535,7 @@ export default class EditRole extends Component {
<div> <div>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
<div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}>
{item.sub_menu.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginRight: 2, marginLeft: -22 }}> {item.sub_menu.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginRight: 2, marginLeft: -22, alignItems:'center', justifyContent:'center', display:'flex' }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
...@@ -584,7 +616,7 @@ export default class EditRole extends Component { ...@@ -584,7 +616,7 @@ export default class EditRole extends Component {
{this.state.setting.map((item, index) => { {this.state.setting.map((item, index) => {
return ( return (
<div> <div>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> {item.menu_id !== 23 && <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
<div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}>
{item.sub_menu.length > 0 && <span onClick={() => this.handleCollapseSetting(item)} style={{ marginRight: 2, marginLeft: -22 }}> {item.sub_menu.length > 0 && <span onClick={() => this.handleCollapseSetting(item)} style={{ marginRight: 2, marginLeft: -22 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
...@@ -622,7 +654,7 @@ export default class EditRole extends Component { ...@@ -622,7 +654,7 @@ export default class EditRole extends Component {
/> />
</div> </div>
</div> </div>
</div> </div>}
{item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => { {item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
return ( return (
<Collapse in={item.collapse} timeout="auto" unmountOnExit> <Collapse in={item.collapse} timeout="auto" unmountOnExit>
...@@ -674,7 +706,7 @@ export default class EditRole extends Component { ...@@ -674,7 +706,7 @@ export default class EditRole extends Component {
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div onClick={() => this.props.onClickClose()} 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> </div>
</button> </button>
</div> </div>
...@@ -684,7 +716,7 @@ export default class EditRole extends Component { ...@@ -684,7 +716,7 @@ export default class EditRole extends Component {
onClick={() => this.validasi()} onClick={() => this.validasi()}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <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> </div>
</button> </button>
</div> </div>
......
src/container/Profile.js
View file @ 839ada14
...@@ -340,7 +340,7 @@ export default class Profile extends Component { ...@@ -340,7 +340,7 @@ export default class Profile extends Component {
{this.state.messageAlert} {this.state.messageAlert}
</Alert> </Alert>
</Snackbar> </Snackbar>
<div className={"main-color"} style={{ height: 203, flex: 1, display: 'flex', alignItems: 'flex-end', padding: 20 }}> <div className={"main-color"} style={{ height: 195, flex: 1, display: 'flex', alignItems: 'flex-end', padding: 20 }}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}> <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
<div style={{ display: 'flex', alignItems: 'center' }}> <div style={{ display: 'flex', alignItems: 'center' }}>
<div style={{ height: 72, width: 72, backgroundColor: 'white', borderRadius: 40, marginRight: 20 }}> <div style={{ height: 72, width: 72, backgroundColor: 'white', borderRadius: 40, marginRight: 20 }}>
......
src/container/ResetPassword.js
View file @ 839ada14
...@@ -20,7 +20,7 @@ class ResetPassword extends Component { ...@@ -20,7 +20,7 @@ class ResetPassword extends Component {
showPass2: false, showPass2: false,
errorPassword: false, errorPassword: false,
errorConfirmPassword: false, errorConfirmPassword: false,
msgPassword: 'Terdiri 8 karakter dengan kombinasi angka.', msgPassword: 'Password minimum 8 characters!.',
msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.', msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
userId: 0, userId: 0,
alert: false, alert: false,
...@@ -65,23 +65,23 @@ class ResetPassword extends Component { ...@@ -65,23 +65,23 @@ class ResetPassword extends Component {
validateReset() { validateReset() {
if (this.state.password.trim() == "") { if (this.state.password.trim() == "") {
this.setState({ errorPassword: true, msgPassword: 'Kata sandi harus diisi!' }) this.setState({ errorPassword: true, msgPassword: 'Password cannot be empty!' })
} else if (this.state.password.length < 8) { } else if (this.state.password.length < 8) {
this.setState({ errorPassword: true, msgPassword: 'Kata sandi minimal 8 karakter!' }) this.setState({ errorPassword: true, msgPassword: 'Password minimum 8 characters!' })
} else if (this.isEmail(this.state.password)) { } else if (this.isEmail(this.state.password)) {
this.setState({ errorPassword: true, msgPassword: 'Format kata sandi tidak boleh menggunakan email!' }) this.setState({ errorPassword: true, msgPassword: 'Password format should not use email!' })
} else if (!this.isRegex(this.state.password)) { } else if (!this.isRegex(this.state.password)) {
this.setState({ errorPassword: true, msgPassword: 'Kata sandi harus berupa kombinasi karakter, huruf dan angka!' }) this.setState({ errorPassword: true, msgPassword: 'The password must be a combination of characters, letters and numbers!' })
} else if (this.state.confirmPassword.trim() == "") { } else if (this.state.confirmPassword.trim() == "") {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi harus diisi!' }) this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password cannot be empty!' })
} else if (this.state.confirmPassword.length < 8) { } else if (this.state.confirmPassword.length < 8) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi minimal 8 karakter!' }) this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Confirm password of at least 8 characters!' })
} else if (this.isEmail(this.state.confirmPassword)) { } else if (this.isEmail(this.state.confirmPassword)) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Format konfirmasi kata sandi tidak boleh menggunakan email!' }) this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation format may not use email!' })
} else if (!this.isRegex(this.state.confirmPassword)) { } else if (!this.isRegex(this.state.confirmPassword)) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi harus berupa kombinasi karakter, huruf dan angka!' }) this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Password confirmation must be a combination of characters, letters and numbers!' })
} else if (this.state.password !== this.state.confirmPassword) { } else if (this.state.password !== this.state.confirmPassword) {
this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Konfirmasi kata sandi harus sama dengan kata sandi!' }) this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'The confirmation password must match the password!' })
} else { } else {
this.confirmPassword() this.confirmPassword()
} }
...@@ -119,9 +119,9 @@ class ResetPassword extends Component { ...@@ -119,9 +119,9 @@ class ResetPassword extends Component {
let data = this.state let data = this.state
this.setState({...data, [e.target.name] : e.target.value}) this.setState({...data, [e.target.name] : e.target.value})
if (e.target.name == "password") { if (e.target.name == "password") {
this.setState({ errorPassword: false, msgPassword: 'Terdiri 8 karakter dengan kombinasi angka.' }) this.setState({ errorPassword: false, msgPassword: 'Password consists of 8 characters with a combination of numbers.' })
} else if (e.target.name == "confirmPassword") { } else if (e.target.name == "confirmPassword") {
this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.' }) this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Confirm Password consists of 8 characters with a combination of numbers.' })
} }
} }
...@@ -137,7 +137,7 @@ class ResetPassword extends Component { ...@@ -137,7 +137,7 @@ class ResetPassword extends Component {
<img src={Images.tia}/> <img src={Images.tia}/>
<TextField <TextField
label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Kata Sandi Baru *</Typography>} label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>New password *</Typography>}
id="password" id="password"
type={this.state.showPass ? 'text' : 'password'} type={this.state.showPass ? 'text' : 'password'}
name={"password"} name={"password"}
...@@ -164,7 +164,7 @@ class ResetPassword extends Component { ...@@ -164,7 +164,7 @@ class ResetPassword extends Component {
/> />
<TextField <TextField
label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Ulangi Kata Sandi Baru *</Typography>} label={<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Repeat New Password *</Typography>}
id="confirmPassword" id="confirmPassword"
type={this.state.showPass2 ? 'text' : 'password'} type={this.state.showPass2 ? 'text' : 'password'}
name={"confirmPassword"} name={"confirmPassword"}
...@@ -191,7 +191,7 @@ class ResetPassword extends Component { ...@@ -191,7 +191,7 @@ class ResetPassword extends Component {
/> />
<Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 50, width: '100%', height: 35, borderRadius: 4, color: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#d8d8d8' : '#51c6ea' }}> <Button name="submit" variant="contained" disabled={this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? true : false} onClick={() => this.validateReset()} style={{ marginTop: 50, width: '100%', height: 35, borderRadius: 4, color: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.password.trim() == '' && this.state.confirmPassword.trim() == '' ? '#d8d8d8' : '#51c6ea' }}>
<Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography> <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Reset Password</Typography>
</Button> </Button>
</div> </div>
</div> </div>
......
src/router/homeRoutes.js
View file @ 839ada14
...@@ -11,6 +11,7 @@ import Parameter from '../container/MasterData/Parameter/Parameter' ...@@ -11,6 +11,7 @@ import Parameter from '../container/MasterData/Parameter/Parameter'
import ReportItems from '../container/MasterData/ReportItems' import ReportItems from '../container/MasterData/ReportItems'
import DashboardCAT from '../container/Laporan/DashboardCAT' import DashboardCAT from '../container/Laporan/DashboardCAT'
import BudgetTahunan from '../container/BudgetTahunan'; import BudgetTahunan from '../container/BudgetTahunan';
import OperatingIndicator from '../container/OperatingIndicator/OperatingIndicator'
const routes = [ const routes = [
{ {
...@@ -57,6 +58,10 @@ const routes = [ ...@@ -57,6 +58,10 @@ const routes = [
path: "/home/cat-dashboard", path: "/home/cat-dashboard",
main: DashboardCAT main: DashboardCAT
}, },
{
path: "/home/operating-indicator",
main: OperatingIndicator
},
{ {
path: "/home/profile", path: "/home/profile",
main: Profile main: Profile
......
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