Skip to content

T
Tia-dev
Commit de407da8 authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

update upload dan edit approval matrix

parent 6ca48237
Show whitespace changes
Inline Side-by-side
Showing with 518 additions and 163 deletions
src/api/index.js
View file @ de407da8
...@@ -83,6 +83,9 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -83,6 +83,9 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body) const updateUnitBisnis = (body) => api.post('/business_unit/update_business_unit', body)
const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body) const searchUnitBisnis = (body) => api.post('/business_unit/search_business_unit', body)
// APPROVAL MATRIX
const getAM = () => api.get('approval_matrix/get_all_approval_matrix')
// ------ // ------
// STEP 3 // STEP 3
// ------ // ------
...@@ -111,7 +114,8 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -111,7 +114,8 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
getUnitBisnis, getUnitBisnis,
createUnitBisnis, createUnitBisnis,
updateUnitBisnis, updateUnitBisnis,
searchUnitBisnis searchUnitBisnis,
getAM
} }
} }
......
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ de407da8
...@@ -2,16 +2,20 @@ import React, { Component } from 'react'; ...@@ -2,16 +2,20 @@ import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { TextField, InputBase } from "@material-ui/core"; import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import UploadFile from "../../library/Upload";
import CreateApprovalMatrix from "./CreateApprovalMatrix"; import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix"; import EditApprovalMatrix from "./EditApprovalMatrix";
import PreviewAM from "./PreviewAM"; import PreviewAM from "./PreviewAM";
import VisualisasiAM from "./VisualisasiAM"; import VisualisasiAM from "./VisualisasiAM";
import api from "../../api";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
const options2 = ct.customOptions2();
const type = [ const type = [
{ {
...@@ -32,11 +36,81 @@ export default class ApprovalMatrix extends Component { ...@@ -32,11 +36,81 @@ export default class ApprovalMatrix extends Component {
visibleCreate: false, visibleCreate: false,
visibleEdit: false, visibleEdit: false,
visibleVisual: false, visibleVisual: false,
dataTable: [],
listData: [],
data: [],
search: "", search: "",
cols: null,
rows: null,
dataLoaded: false
} }
this.fileHandler = this.fileHandler.bind(this);
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
if (err) {
// console.log(err);
}
else {
let judul = resp.rows[0]
let isi = resp.rows.slice(1)
// let body = isi.map((item) => {
// return {
// item
// ]
// })
// console.log(JSON.stringify(isi));
this.setState({
dataLoaded: true,
cols: judul,
rows: isi
});
}
});
} }
componentDidMount() { componentDidMount() {
this.getData()
}
getData() {
api.create().getAM().then((response) => {
// console.log(response)
let datas = response.data.data
let listData = datas.map((item, index) => {
return [item.fullname ]
})
console.log(listData)
if(response.status == null){
alert(response.problem)
}
else if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item, index) => {
return [index, item.approval_matrix_id, item.approval_type_name, item.orders, item.fullname, item.operator_type_name, item.status ]
})
this.setState({ dataTable: listData, listData: response.data.data })
} else {
alert(response.data.message)
}
})
}
openPopUp(index, type) {
if (type === 'edit') {
this.setState({
selectIndex: index,
visibleEdit: true
})
} else {
this.setState({
data: this.state.listData[index],
visibleCreate: true
})
}
} }
handleInputChange = (e) => { handleInputChange = (e) => {
...@@ -66,15 +140,88 @@ export default class ApprovalMatrix extends Component { ...@@ -66,15 +140,88 @@ export default class ApprovalMatrix extends Component {
cursor: 'pointer', cursor: 'pointer',
borderColor: 'transparent' borderColor: 'transparent'
}} }}
onClick={() => null} onClick={() => this.openPopUp(tableMeta.rowIndex, 'edit')}
// onClick={() => this.setState({ visibleEdit: true })}
> >
<img src={Images.editCopy} onClick={() => this.setState({ visibleEdit: true })} /> <img src={Images.editCopy} />
</button> </button>
</div > </div >
); );
} }
} }
}, "ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Status"] },
{
name: "ID",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Tipe Persetujuan",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Order",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Nama Pemberi Persetujuan",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Operator",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
},
{
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[6] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
}]
const data = [ const data = [
["", "1", "Yearly", "1", "John Doe", "-", "Aktif"], ["", "1", "Yearly", "1", "John Doe", "-", "Aktif"],
["", "2", "Yearly", "2", "John Doe", "-", "Aktif"], ["", "2", "Yearly", "2", "John Doe", "-", "Aktif"],
...@@ -126,7 +273,7 @@ export default class ApprovalMatrix extends Component { ...@@ -126,7 +273,7 @@ export default class ApprovalMatrix extends Component {
}} }}
onClick={() => null} onClick={() => null}
> >
<img src={Images.upload} /> <img src={Images.upload} onClick={() => this.setState({ visibleUpload: true })}/>
</button> </button>
<button <button
style={{ style={{
...@@ -168,7 +315,8 @@ export default class ApprovalMatrix extends Component { ...@@ -168,7 +315,8 @@ export default class ApprovalMatrix extends Component {
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={data} theme={getMuiTheme()}
data={this.state.dataTable}
columns={columns} columns={columns}
options={options} options={options}
/> />
...@@ -176,16 +324,55 @@ export default class ApprovalMatrix extends Component { ...@@ -176,16 +324,55 @@ export default class ApprovalMatrix extends Component {
</div> </div>
</div> </div>
</div> </div>
: false :
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div>
<div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
</div>
<div style={{ padding: 25 }}>
{this.state.dataLoaded && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
theme={getMuiTheme()}
data={this.state.rows}
columns={this.state.cols}
options={options}
/>
</MuiThemeProvider>
)}
</div>
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
<button
type="button"
onClick={() => this.setState({ visibleAM: true })}
style={{ marginRight: 20}}
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
} }
{this.state.visibleCreate && ( {this.state.visibleCreate && (
<CreateApprovalMatrix <CreateApprovalMatrix
onClickClose={() => this.setState({ visibleCreate: false })} onClickClose={() => this.setState({ visibleCreate: false })}
data={this.state.listData}
/> />
)} )}
{this.state.visibleEdit && ( {this.state.visibleEdit && (
<EditApprovalMatrix <EditApprovalMatrix
type={"edit"}
onClickClose={() => this.setState({ visibleEdit: false })} onClickClose={() => this.setState({ visibleEdit: false })}
data={this.state.listData[this.state.selectIndex]}
/> />
)} )}
{this.state.visibleVisual && ( {this.state.visibleVisual && (
...@@ -193,6 +380,39 @@ export default class ApprovalMatrix extends Component { ...@@ -193,6 +380,39 @@ export default class ApprovalMatrix extends Component {
onClickClose={() => this.setState({ visibleVisual: false })} onClickClose={() => this.setState({ visibleVisual: false })}
/> />
)} )}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["pdf"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.setState({ visibleUpload: false, visibleAM: false })}
/>
</div>
</div>
)}
</div> </div>
); );
} }
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ de407da8
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField } from '@material-ui/core'; import { TextField, Typography } from '@material-ui/core';
import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pickers";
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import format from "date-fns/format";
import localeID from "date-fns/locale/id"
const type = [ const type = [
{ {
value: 'KPI', value: 'YEARLY',
label: 'KPI', label: 'YEARLY',
}, },
{ {
value: 'Gatau', value: 'MONTHLY',
label: 'Gatau', label: 'MONTHLY',
},
{
value: 'DAILY',
label: 'DAILY',
}, },
]; ];
const approve_by = [ const approve_by = [
...@@ -24,20 +31,56 @@ const approve_by = [ ...@@ -24,20 +31,56 @@ const approve_by = [
]; ];
const operator = [ const operator = [
{ {
value: '1', value: '-',
label: '-', label: '-',
}, },
{ {
value: '2', value: 'AND',
label: 'AND', label: 'AND',
}, },
{ {
value: '3', value: 'OR',
label: 'OR', label: 'OR',
}, },
]; ];
export default class EditApprovalMatrix extends Component { export default class EditApprovalMatrix extends Component {
constructor(props) {
super(props)
this.state = {
startDate: null,
endDate: null,
date: new Date()
}
}
render() { render() {
let { type } = this.props
return type === 'edit' ? this.renderEdit() : false
}
componentDidMount() {
console.log(this.props.data);
}
handleChange(e, type) {
let data = this.state
let isDate = type !== ''? true : false
if (isDate && type == 'start_date') {
this.setState({...data, startDate : format(e, 'yyyy-MM-dd')})
} else if (isDate && type == 'end_date') {
this.setState({...data, endDate : format(e, 'yyyy-MM-dd')})
} else {
this.setState({...data, [e.target.name] : e.target.value})
}
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
renderEdit() {
return ( return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}> <div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
...@@ -61,26 +104,47 @@ export default class EditApprovalMatrix extends Component { ...@@ -61,26 +104,47 @@ export default class EditApprovalMatrix extends Component {
<div className="border-bottom" style={{ padding: 20 }}> <div className="border-bottom" style={{ padding: 20 }}>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%', height: '90%' }} style={{ width: '100%' }}
id="id" id="id"
variant="filled"
label="ID" label="ID"
value="1" value={this.props.data.approval_matrix_id}
> disabled
</TextField> inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}> <div className="" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="type" id="type"
select select
label="Tipe Persetujuan" label="Tipe Persetujuan"
value="KPI" value={this.props.data.approval_type_name}
onChange={(e) => null} onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{type.map((option) => ( {type.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -93,26 +157,48 @@ export default class EditApprovalMatrix extends Component { ...@@ -93,26 +157,48 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="order" id="order"
variant="standard"
label="Order" label="Order"
value="1" value={this.props.data.orders}
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
</TextField> </TextField>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="approve-by" id="approve-by"
select select
label="Pemberi Persetujuan" label="Pemberi Persetujuan"
value="1" value={this.props.data.fullname}
onChange={(e) => null} onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{approve_by.map((option) => ( {approve_by.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -125,14 +211,25 @@ export default class EditApprovalMatrix extends Component { ...@@ -125,14 +211,25 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ paddingTop: 4, paddingRight: 10, paddingBottom: 10, paddingLeft: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="operator" id="operator"
select select
label="Operator" label="Operator"
value="1" value={this.props.data.operator_type_name}
onChange={(e) => null} onChange={(e) => null}
selectProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{operator.map((option) => ( {operator.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -148,73 +245,107 @@ export default class EditApprovalMatrix extends Component { ...@@ -148,73 +245,107 @@ export default class EditApprovalMatrix extends Component {
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="start-period" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
value="31 Desember 2020" format="dd MMMM yyyy"
> value={this.state.startDate}
{/* {periode.map((option) => ( onChange={(e) => this.handleChange(e, 'start_date')}
<MenuItem key={option.value} value={option.value}> KeyboardButtonProps={{
{option.label} 'aria-label': 'change date',
</MenuItem> }}
))} */} style={{padding: 0, margin: 0, width: '100%'}}
</TextField> InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <DatePicker
style={{ width: '100%' }} margin="normal"
id="end-period" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
value="31 Desember 2020" format="dd MMMM yyyy"
> value={this.state.endDate}
{/* {periode.map((option) => ( onChange={(e) => this.handleChange(e, 'end_date')}
<MenuItem key={option.value} value={option.value}> KeyboardButtonProps={{
{option.label} 'aria-label': 'change date',
</MenuItem> }}
))} */} style={{padding: 0, margin: 0, width: '100%'}}
</TextField> InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
/>
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px"> <div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="status" id="status"
variant="filled" label="Status"
label="Aktif" value={this.props.data.status}
value="Aktif" disabled
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField> </TextField>
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="max-value" id="max-value"
label="Max Value" label="Max Value"
value="10" value="10"
onChange={(e) => this.handleChange(e, '')}
inputProps={{
style: {
fontSize: 11
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085'
}
}}
> >
</TextField> </TextField>
</div> </div>
</div> </div>
</div> </div>
<div className=""> {/* <div className="">
<span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span> <span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div> </div>
<div className=""> <div className="">
<span style={{ fontSize: 11, fontWeight: 'bold' }}>Diubah<span style={{ marginLeft: 17}}> : Admin - 21 Jul 2020, 18:45</span></span> <span style={{ fontSize: 11, fontWeight: 'bold' }}>Diubah<span style={{ marginLeft: 17}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div> */}
<div style={{flexDirection:'column', display: 'flex', padding: 10 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
{/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</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 }}>
......
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