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

src/container/EmailVerification.js

@@ -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' }}>
                 <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'}}>
                   <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>
                 </Link>
                 

src/container/ForgotPassword.js

@@ -39,9 +39,9 @@ class ForgotPassword extends Component {
         var isEmail = this.isEmail(this.state.email)
     
       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) {
-          this.setState({ errorEmail: true, msgEmail: 'Format email tidak sesuai!' })
+          this.setState({ errorEmail: true, msgEmail: 'Email format is not correct!' })
       } else {
           this.verification()
       }
@@ -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' }}>
-                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography>
+                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Reset Password</Typography>
                 </Button>
 
                 <div style={{ marginTop: 24}}>
                   <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>
                 </div>
               </div>

src/container/Home.js

@@ -17,7 +17,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import Collapse from '@material-ui/core/Collapse';
 import DateFnsUtils from '@date-io/date-fns';
 import { MuiPickersUtilsProvider } from "@material-ui/pickers";
-import localeID from 'date-fns/locale/id';
+import localeID from 'date-fns/locale/en-US';
 
 import {
   BrowserRouter as Router,
@@ -483,7 +483,9 @@ export default function MiniDrawer() {
           <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 style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
+                <Link to={"profile"}>
                   {userPhoto === "" ? null : <img src={userPhoto} style={{ width: 72, height: 72, borderRadius: 50 }} />}
+                </Link>
               </div>
 
             </div>
@@ -585,6 +587,20 @@ export default function MiniDrawer() {
             </div>
           ))}
         </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>
       <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
         <div>

src/container/Login.js

@@ -65,11 +65,11 @@ class Login extends Component {
   validateLogin() {
     var isEmail = this.isEmail(this.state.email)
     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) {
-      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() == "") {
-      this.setState({ errorPassword: true, msgPassword: 'Password harus diisi!' })
+      this.setState({ errorPassword: true, msgPassword: 'Password cannot be empty!' })
     } else {
       this.login()
     }
@@ -102,7 +102,7 @@ class Login extends Component {
                 }
                 this.props.history.push('/home/beranda')
               } else {
-                if (response.data.message == 'Kata sandi tidak sesuai.') {
+                if (response.data.message == 'Incorrect Password.') {
                   this.setState({ errorPassword: true, msgPassword: response.data.message })
                 } else {
                   this.setState({ errorEmail: true, msgEmail: response.data.message })
@@ -169,7 +169,7 @@ class Login extends Component {
               />
 
               <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"
                 type={this.state.showPass ? 'text' : 'password'}
                 name={"password"}
@@ -199,7 +199,7 @@ class Login extends Component {
               <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 })} />
                 <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>
               <button
                 type="submit"

src/container/MasterData/Parameter/CreateParameter.js

@@ -939,7 +939,7 @@ export default class CreateParameter extends Component {
                             <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
                                 <TextField
                                     style={{ width: '100%' }}
-                                    defaultValue={"Aktif"}
+                                    defaultValue={"Active"}
                                     id="status"
                                     label="Status"
                                     disabled

src/container/MasterData/Parameter/Parameter.js

@@ -681,7 +681,7 @@ export default class Parameter extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <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()}>
                     <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                         {this.state.messageAlert}
@@ -689,7 +689,7 @@ export default class Parameter extends Component {
                 </Snackbar>
                 {this.state.visibleParameter === true ?
                     <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>
                             <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 }} />

src/container/MasterData/Perusahaan/Perusahaan.js

@@ -465,7 +465,7 @@ export default class Perusahaan extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <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()}>
                     <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                         {this.state.messageAlert}
@@ -473,7 +473,7 @@ export default class Perusahaan extends Component {
                 </Snackbar>
                 {this.state.visiblePerusahaan === true ?
                     <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>
                             <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 }} />

src/container/MasterData/ReportItems.js

@@ -103,7 +103,7 @@ export default class ReportItems extends Component {
                             ]
                         })
                         let columns = [
-                            "Data Ke-",
+                            "Data",
                             {
                                 name: "Report Type",
                                 options: {
@@ -621,7 +621,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -633,7 +633,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -645,7 +645,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -657,7 +657,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -669,7 +669,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -681,7 +681,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -693,7 +693,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -705,7 +705,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -717,7 +717,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -729,7 +729,7 @@ export default class ReportItems extends Component {
                 customBodyRender: (val, tableMeta) => {
                     return (
                         <div style={{ display: 'flex' }}>
-                            <span style={{ color: tableMeta.rowData[10] === "active" ? "#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 >
                     );
                 }
@@ -747,7 +747,7 @@ export default class ReportItems extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <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()}>
                     <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                         {this.state.messageAlert}
@@ -755,7 +755,7 @@ export default class ReportItems extends Component {
                 </Snackbar>
                 {this.state.itemReport === true ?
                     <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 - 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' }}>
                                 <img src={Images.searchBlack} style={{ marginRight: 10 }} />

src/container/MasterData/UnitBisnis.js

@@ -395,7 +395,7 @@ export default class UnitBisnis extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <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()}>
                     <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                         {this.state.messageAlert}
@@ -403,7 +403,7 @@ export default class UnitBisnis extends Component {
                 </Snackbar>
                 {this.state.visibleUnitBisnis === true ?
                     <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>
                             <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 }} />

src/container/MasterData/formReportItems/CreateReportItems.js

@@ -160,19 +160,19 @@ export default class CreateReportItems extends Component {
             this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type cannot be empty' })
         }
         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)) {
-            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)) {
-            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)) {
-            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)) {
-            this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' })
+            this.setState({ errorEndDate: true, msgErrorED: 'End Date cannot be empty' })
         }
         else {
             this.addReportItems()

src/container/MasterData/formReportItems/EditReportItems.js

@@ -138,15 +138,15 @@ export default class EditReportItems extends Component {
         } else if (R.isNil(this.state.InputType)) {
             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))) {
-            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)) {
-            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)) {
-            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)) {
-            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)) {
-            this.setState({ errorEndDate: true, msgErrorED: 'End Date Harus Diisi' })
+            this.setState({ errorEndDate: true, msgErrorED: 'End Date cannot be empty' })
         } else {
             this.updateReportItems()
         }

src/container/MasterData/formReportItems/VisualReportItems.js

@@ -210,11 +210,11 @@ export default class VisualReportItems extends Component {
                     <div style={{ width: '100%' }}  className={"main-color"}  />
                     <div>
                         <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 style={{ padding: 25, width: '100%' }}>
                             <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4' }}>
-                                <label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki 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 }}>
                                     <Autocomplete
                                         {...this.state.listReport}
@@ -222,7 +222,7 @@ export default class VisualReportItems extends Component {
                                         onChange={(event, newInputValue) => this.setState({ report: newInputValue }, () => this.getItemHierarki())}
                                         debug
                                         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}
                                     />
                                 </div>

src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js

@@ -396,7 +396,7 @@ export default class CreateUnitBisnis extends Component {
                             <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5, backgroundColor: '#e8e8e8', }}>
                                 <TextField
                                     style={{ width: '100%' }}
-                                    defaultValue={"Aktif"}
+                                    defaultValue={"Active"}
                                     id="status"
                                     label="Status"
                                     disabled
@@ -425,7 +425,7 @@ export default class CreateUnitBisnis extends Component {
                                 <TextField
                                     style={{ width: '100%' }}
                                     id="unit"
-                                    label="Unit Bisnis"
+                                    label="Business Unit"
                                     value={this.state.name}
                                     inputProps={{
                                         style: {

src/container/OperatingIndicator/OperatingIndicator.js

+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

@@ -123,7 +123,7 @@ export default class UserRole extends Component {
         let body = {
           user: payload
         }
-        this.setState({ payload: body })
+        this.setState({ payload: body, rows: []})
         api.create().checkUploadUser(body).then(response => {
           console.log(response);
           if (response.data) {
@@ -142,7 +142,7 @@ export default class UserRole extends Component {
     
                 let columns = [
                   "Data Ke-",
-                  "Nama Lengkap",
+                  "Full Name",
                   {
                     name: "Email",
                     options: {
@@ -334,7 +334,7 @@ export default class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <div style={{ display: 'flex' }}>
-              {/* {tableMeta.rowData[6] === "Aktif" ? */}
+              {/* {tableMeta.rowData[6] === "Active" ? */}
                 <button
                   style={{
                     backgroundColor: 'transparent',
@@ -359,18 +359,18 @@ export default class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
       }
     }, {
-      name: "Nama Lengkap",
+      name: "Full Name",
       options: {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -381,7 +381,7 @@ export default class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -392,18 +392,18 @@ export default class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
       }
     }, {
-      name: "Perusahaan",
+      name: "Company",
       options: {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -414,7 +414,7 @@ export default class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -423,14 +423,14 @@ export default class UserRole extends Component {
     return (
       <div style={{ height: this.props.height }}>
         {/* <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()}>
             <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                 {this.state.messageAlert}
             </Alert>
         </Snackbar>
         {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>
             {/* <div style={{ width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
               <div style={{ width: '50%', backgroundColor: 'white', padding: 10, borderRadius: 7.5 }}>
@@ -523,7 +523,7 @@ export default class UserRole extends Component {
                 </button>
               </a>
               <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
                   style={{
                     backgroundColor: 'transparent',

src/container/Otorisasi/User/AddUser.js

@@ -270,11 +270,39 @@ export default class AddUser extends Component {
 
     handleItemClick(item) {
         let indexID = this.state.company.findIndex((val) => val === item.id)
+        let listCompany = this.state.listCompany
         let company = this.state.company
         if (indexID === -1) {
             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 {
             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 })
     }
@@ -284,7 +312,7 @@ export default class AddUser extends Component {
         if (pad !== undefined) {
             padding = pad
         } else {
-            padding = 20
+            padding = 30
         }
         return (
             <div>
@@ -294,7 +322,7 @@ export default class AddUser extends Component {
                             return (
                                 // <li>
                                 <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) ?
                                             null
                                             :
@@ -324,7 +352,7 @@ export default class AddUser extends Component {
                                         </span>
                                         <Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
                                     </div>
-                                    {!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
+                                    {!R.isNil(data.children) && this.renderChildren(data, padding + 30)}
                                 </Collapse>
                                 // </li>
                             )
@@ -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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                             <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 className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
@@ -456,7 +484,7 @@ export default class AddUser extends Component {
                                 style={{ width: '100%' , marginTop: 7}}
                                 id="fullname"
                                 name="fullname"
-                                label="Nama Lengkap"
+                                label="Full Name"
                                 value={this.state.fullname}
                                 error={this.state.errorFullname}
                                 helperText={this.state.msgErrorFN}
@@ -549,7 +577,7 @@ export default class AddUser extends Component {
                                 <DatePicker
                                     margin="normal"
                                     id="startDate"
-                                    label="Berlaku Mulai"
+                                    label="Start Date"
                                     format="dd MMMM yyyy"
                                     value={this.state.startDate}
                                     error={this.state.errorStartDate}
@@ -582,7 +610,7 @@ export default class AddUser extends Component {
                                 <DatePicker
                                     margin="normal"
                                     id="endDate"
-                                    label="Berlaku Hingga"
+                                    label="End Date"
                                     format="dd MMMM yyyy"
                                     value={this.state.endDate}
                                     error={this.state.errorEndDate}
@@ -622,7 +650,7 @@ export default class AddUser extends Component {
                                     disabled
                                     // id="outlined-read-only-input"
                                     variant="filled"
-                                    value={'Aktif'}
+                                    value={'Active'}
                                     inputProps={{
                                         style: {
                                             fontSize: 11,
@@ -656,7 +684,7 @@ export default class AddUser extends Component {
                                     disabled
                                     // id="outlined-read-only-input"
                                     variant="filled"
-                                    value={'T'}
+                                    value={'N'}
                                     inputProps={{
                                         style: {
                                             fontSize: 11,
@@ -680,13 +708,13 @@ export default class AddUser extends Component {
                             </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}}>{`Diubah: `}</Typography>
-                    </div>
+                    </div> */}
                     <Divider style={{ margin: 20 }} />
                     <div style={{ paddingLeft: 20, paddingRight: 20 }}>
-                        <h5>Otorisasi Perusahaan</h5>
+                        <h5>Authorization Company</h5>
                         <div style={{ paddingLeft: 10, overflow: 'scroll', height: '25vh' }}>
                             {this.state.listCompany.map((item, index) => {
                                 return (
@@ -728,14 +756,14 @@ export default class AddUser extends Component {
                         <div className="column-1" style={{ alignSelf: 'center' }}>
                             <button onClick={() => this.props.onClickClose()}>
                                 <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
-                                    <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
+                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
                                 </div>
                             </button>
                         </div>
                         <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                             <button onClick={() => this.validasi()}>
                                 <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
-                                    <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
+                                    <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
                                 </div>
                             </button>
                         </div>

src/container/Otorisasi/User/EditUser.js

@@ -275,8 +275,35 @@ export default class EditUser extends Component {
         let company = this.state.company
         if (indexID === -1) {
             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 {
             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 })
     }
@@ -286,7 +313,7 @@ export default class EditUser extends Component {
         if (pad !== undefined) {
             padding = pad
         } else {
-            padding = 20
+            padding = 30
         }
         return (
             <div>
@@ -296,7 +323,7 @@ export default class EditUser extends Component {
                             return (
                                 // <li>
                                 <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) ?
                                             null
                                             :
@@ -326,7 +353,7 @@ export default class EditUser extends Component {
                                         </span>
                                         <Typography style={{ fontSize: 12 }}>{titleCase(data.company_name)}</Typography>
                                     </div>
-                                    {!R.isNil(data.children) && this.renderChildren(data, padding + 20)}
+                                    {!R.isNil(data.children) && this.renderChildren(data, padding + 30)}
                                 </Collapse>
                                 // </li>
                             )
@@ -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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                             <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 className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
@@ -458,7 +485,7 @@ export default class EditUser extends Component {
                                     style={{ width: '100%', marginTop: 7 }}
                                     id="fullname"
                                     name="fullname"
-                                    label="Nama Lengkap"
+                                    label="Full Name"
                                     value={this.state.tempData === null ? '' : this.state.tempData.fullname}
                                     onChange={(e) => this.handleChange(e, '')}
                                     // defaultValue="Default Value"
@@ -548,7 +575,7 @@ export default class EditUser extends Component {
                                 <DatePicker
                                     margin="normal"
                                     id="startDate"
-                                    label="Berlaku Mulai"
+                                    label="Start Date"
                                     format="dd MMMM yyyy"
                                     value={this.state.tempData === null ? null : this.state.tempData.start_date}
                                     error={this.state.errorStartDate}
@@ -580,7 +607,7 @@ export default class EditUser extends Component {
                                 <DatePicker
                                     margin="normal"
                                     id="endDate"
-                                    label="Berlaku Hingga"
+                                    label="End Date"
                                     format="dd MMMM yyyy"
                                     value={this.state.tempData === null ? null : this.state.tempData.end_date}
                                     error={this.state.errorEndDate}
@@ -678,12 +705,12 @@ export default class EditUser extends Component {
                         </div>
                     </div>
                     <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 }}>{`Diubah: ${this.state.tempData === null ? '' : this.state.tempData.updated}`}</Typography>
+                        <Typography style={{ fontSize: 12 }}>{`Created by  : ${this.state.tempData === null ? '' : this.state.tempData.created}`}</Typography>
+                        <Typography style={{ fontSize: 12 }}>{`Updated by: ${this.state.tempData === null ? '' : this.state.tempData.updated}`}</Typography>
                     </div>
                     <Divider style={{ margin: 20 }} />
                     <div style={{ paddingLeft: 20, paddingRight: 20 }}>
-                        <h5>Otorisasi Perusahaan</h5>
+                        <h5>Authorization Company</h5>
                         <div style={{ paddingLeft: 10, overflow: 'scroll', height: '25vh' }}>
                             {this.state.listCompany.map((item, index) => {
                                 return (
@@ -726,14 +753,14 @@ export default class EditUser extends Component {
                         <div className="column-1" style={{ alignSelf: 'center' }}>
                             <button onClick={() => this.props.onClickClose()}>
                                 <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
-                                    <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
+                                    <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
                                 </div>
                             </button>
                         </div>
                         <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                             <button onClick={() => this.validasi()}>
                                 <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
-                                    <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
+                                    <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
                                 </div>
                             </button>
                         </div>

src/container/Otorisasi/UserRole.js

@@ -157,7 +157,7 @@ class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -168,7 +168,7 @@ class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -179,7 +179,7 @@ class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -190,7 +190,7 @@ class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <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 >
           );
         }
@@ -199,14 +199,14 @@ class UserRole extends Component {
     return (
       <div style={{ height: this.props.height }}>
         {/* <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()}>
             <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                 {this.state.messageAlert}
             </Alert>
         </Snackbar>
         <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>
             <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 }} />
@@ -228,7 +228,7 @@ class UserRole extends Component {
             </div>
             {/* <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' }}>
-              <a data-tip={'Tambah'} data-for="create">
+              <a data-tip={'Create'} data-for="create">
                 <button
                   style={{
                     backgroundColor: 'transparent',

src/container/Profile.js

@@ -340,7 +340,7 @@ export default class Profile extends Component {
                         {this.state.messageAlert}
                     </Alert>
                 </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' }}>
                             <div style={{ height: 72, width: 72, backgroundColor: 'white', borderRadius: 40, marginRight: 20 }}>

src/container/ResetPassword.js

@@ -20,7 +20,7 @@ class ResetPassword extends Component {
             showPass2: false,
             errorPassword: false,
             errorConfirmPassword: false,
-            msgPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
+            msgPassword: 'Password minimum 8 characters!.',
             msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
             userId: 0,
             alert: false,
@@ -65,23 +65,23 @@ class ResetPassword extends Component {
 
     validateReset() {
         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) {
-            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)) {
-            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)) {
-            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() == "") {
-            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) {
-            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)) {
-            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)) {
-            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) {
-            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 {
             this.confirmPassword()
         }
@@ -119,9 +119,9 @@ class ResetPassword extends Component {
       let data = this.state
       this.setState({...data, [e.target.name] : e.target.value})
       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") {
-          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 {
                 <img src={Images.tia}/>
 
                 <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"
                   type={this.state.showPass ? 'text' : 'password'}
                   name={"password"}
@@ -164,7 +164,7 @@ class ResetPassword extends Component {
                 />
 
                 <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"
                   type={this.state.showPass2 ? 'text' : 'password'}
                   name={"confirmPassword"}
@@ -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' }}>
-                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography>
+                  <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Reset Password</Typography>
                 </Button>
               </div>
           </div>

src/router/homeRoutes.js

@@ -11,6 +11,7 @@ import Parameter from '../container/MasterData/Parameter/Parameter'
 import ReportItems from '../container/MasterData/ReportItems'
 import DashboardCAT from '../container/Laporan/DashboardCAT'
 import BudgetTahunan from '../container/BudgetTahunan';
+import OperatingIndicator from '../container/OperatingIndicator/OperatingIndicator'
 
 const routes = [
   {
@@ -57,6 +58,10 @@ const routes = [
     path: "/home/cat-dashboard",
     main: DashboardCAT
   },
+  {
+    path: "/home/operating-indicator",
+    main: OperatingIndicator
+  },
   {
     path: "/home/profile",
     main: Profile