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

src/container/ForgotPassword.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
-import { TextField, InputAdornment, Button, Typography } from '@material-ui/core';
+import { TextField, InputAdornment, Button, Typography, Snackbar } from '@material-ui/core';
 import api from '../api';
 import Constant from '../library/Constant';
+import MuiAlert from '@material-ui/lab/Alert';
+import { withStyles } from '@material-ui/core/styles';
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
 
 class ForgotPassword extends Component {
     constructor(props) {
@@ -11,7 +15,10 @@ class ForgotPassword extends Component {
         this.state = {
             email: '',
             errorEmail: false,
-            msgEmail: ''
+            msgEmail: '',
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''  
         }
     }
 
@@ -46,18 +53,35 @@ class ForgotPassword extends Component {
         "email": this.state.email
       }
       api.create().verification(payload).then((response) => {
-        if(response.data.status === 'success') {
-          this.props.history.push('/email-verification')
+        if (response.data) {
+            if (response.ok) {
+                if(response.data.status === 'success') {
+                    this.props.history.push('/email-verification')
+                } else {
+                    this.setState({ errorEmail: true, msgEmail: response.data.message })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })     
+            }
         } else {
-            this.setState({ errorEmail: true, msgEmail: response.data.message })
+            this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) 
         }
       })
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     render() {
         return (
           <div style={{ flex: 1, display: 'flex', backgroundColor: '#152d40', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
-              <div style={{padding: 60, display: 'flex', flexDirection: 'column', width: 378, height: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
+            <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                    {this.state.messageAlert}
+                </Alert>
+            </Snackbar>
+              <div style={{padding: 60, display: 'flex', flexDirection: 'column', width: (this.state.msgEmail.length > 45 ? 403 : 378), height: 351, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
                 <img src={Images.tia} />
 
                 <TextField
@@ -78,7 +102,7 @@ class ForgotPassword extends Component {
                     }}
                 />
 
-                <Button name="submit" variant="contained" disabled={this.state.email.trim() === '' ? true : false} onClick={() => this.validateEmail()} style={{ marginTop: this.state.errorEmail ? 35 : 23,  width: '100%', height: 30, borderRadius: 4, color: this.state.email.trim() === '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() === '' ? '#d8d8d8' : '#51c6ea' }}>
+                <Button name="submit" variant="contained" disabled={this.state.email.trim() === '' ? true : false} onClick={() => this.validateEmail()} style={{ marginTop: this.state.errorEmail ? (this.state.msgEmail.length > 45 ? 60 : 35) : 23,  width: '100%', height: 30, borderRadius: 4, color: this.state.email.trim() === '' ? '#4b4b4b' : '#fff', backgroundColor: this.state.email.trim() === '' ? '#d8d8d8' : '#51c6ea' }}>
                   <Typography style={{fontSize: 12, fontFamily: 'Nunito Sans, sans-serif'}}>Lanjut</Typography>
                 </Button>
 

src/container/Login.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
-import { Checkbox, Button, InputAdornment, TextField, InputLabel, Typography, IconButton } from '@material-ui/core';
+import { Checkbox, Button, InputAdornment, TextField, Typography, IconButton, Snackbar } from '@material-ui/core';
 import { withStyles } from '@material-ui/core/styles';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import MuiAlert from '@material-ui/lab/Alert';
 import api from '../api';
 import Constant from '../library/Constant';
 import { Link } from 'react-router-dom';
@@ -18,6 +19,9 @@ const CustomCheckbox = withStyles({
   checked: {},
 })((props) => <Checkbox color="default" {...props} />);
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 class Login extends Component {
   constructor(props) {
     super(props)
@@ -29,7 +33,10 @@ class Login extends Component {
       errorPassword: false,
       msgEmail: '',
       msgPassword: '',
-      rememberMe: false
+      rememberMe: false,
+      alert: false,
+      tipeAlert: '',
+      messageAlert: ''
     }
   }
 
@@ -68,6 +75,10 @@ class Login extends Component {
     }
   }
 
+  closeAlert() {
+    this.setState({ alert: false })
+  }
+
   login() {
     console.log('login');
     let payload = {
@@ -76,28 +87,32 @@ class Login extends Component {
     }
     api.create().login(payload).then((response) => {
       if (response.data) {
-        if (response.data.status === 'success') {
-          console.log(response.data.data)
-          localStorage.setItem(Constant.TOKEN, response.data.data.token)
-          localStorage.setItem(Constant.USER, response.data.data.user_id)
-          if (this.state.rememberMe) {
-            localStorage.setItem(Constant.EMAIL, this.state.email)
-            localStorage.setItem(Constant.PASSWORD, this.state.password)
-            // console.log(this.state.email, this.state.password)
-          } else {
-            localStorage.setItem(Constant.EMAIL, '')
-            localStorage.setItem(Constant.PASSWORD, '')
-          }
-          this.props.history.push('/home/beranda')
+        if (response.ok) {
+            if (response.data.status === 'success') {
+                console.log(response.data.data)
+                localStorage.setItem(Constant.TOKEN, response.data.data.token)
+                localStorage.setItem(Constant.USER, response.data.data.user_id)
+                if (this.state.rememberMe) {
+                  localStorage.setItem(Constant.EMAIL, this.state.email)
+                  localStorage.setItem(Constant.PASSWORD, this.state.password)
+                  // console.log(this.state.email, this.state.password)
+                } else {
+                  localStorage.setItem(Constant.EMAIL, '')
+                  localStorage.setItem(Constant.PASSWORD, '')
+                }
+                this.props.history.push('/home/beranda')
+              } else {
+                if (response.data.message == 'Kata sandi tidak sesuai.') {
+                  this.setState({ errorPassword: true, msgPassword: response.data.message })
+                } else {
+                  this.setState({ errorEmail: true, msgEmail: response.data.message })
+                }
+              }
         } else {
-          if (response.data.message == 'Kata sandi tidak sesuai.') {
-            this.setState({ errorPassword: true, msgPassword: response.data.message })
-          } else {
-            this.setState({ errorEmail: true, msgEmail: response.data.message })
-          }
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })    
         }
       } else {
-        alert(response.problem)
+        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
       }
     })
   }
@@ -116,6 +131,11 @@ class Login extends Component {
   render() {
     return (
       <div style={{ flex: 1, display: 'flex' }}>
+        <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+            <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                {this.state.messageAlert}
+            </Alert>
+        </Snackbar>
         <div style={{ width: '50%', height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
           <img src={Images.tia} />
           <img src={Images.imageLogin} style={{ marginTop: 30 }} />

src/container/MasterData/Parameter/Parameter.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import Images from '../../../assets/Images';
 import MUIDataTable from "mui-datatables";
-import { InputBase } from "@material-ui/core";
+import { InputBase, Snackbar, withStyles } from "@material-ui/core";
+import MuiAlert from '@material-ui/lab/Alert';
 import CreateParameter from '../Parameter/CreateParameter';
 import api from '../../../api';
 import PopUpFailedSave from "../../../library/PopUpFailedSave";
@@ -15,6 +16,9 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 const options2 = ct.customOptions2();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class Parameter extends Component {
     constructor(props) {
         super(props)
@@ -24,7 +28,10 @@ export default class Parameter extends Component {
             visibleParameter: true,
             popupError: false,
             data: [],
-            dataTable: []
+            dataTable: [],
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -76,10 +83,15 @@ export default class Parameter extends Component {
     updateParameter = (payload) => {
         this.setState({ visibleEdit: false })
         api.create().updateParameter(payload).then(response => {
-            if (response.data.status == 'success') {
-                this.getAllParameter()
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getAllParameter()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -87,10 +99,15 @@ export default class Parameter extends Component {
     createParameter = (payload) => {
         this.setState({ visibleCreate: false })
         api.create().createParameter(payload).then(response => {
-            if (response.data.status == 'success') {
-                this.getAllParameter()
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getAllParameter()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -499,14 +516,22 @@ export default class Parameter extends Component {
             if (response.data) {
                 if (response.data.status === "success") {
                     console.log(response)
-                    alert(response.data.message)
                     this.getAllParameter()
                     this.setState({ visibleParameter: true })
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                 }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     render() {
         const columns = [{
             name: "Action",
@@ -522,7 +547,7 @@ export default class Parameter extends Component {
                                     borderColor: 'transparent'
                                 }}
                                 onClick={() => this.openPopUp(tableMeta.rowData, 'edit')}
-                                // onClick={()=> console.log(tableMeta)}
+                            // onClick={()=> console.log(tableMeta)}
                             >
                                 <img src={Images.editCopy} />
                             </button>
@@ -641,6 +666,11 @@ export default class Parameter extends Component {
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
                 <div className={"main-color"} style={{ height: 199, 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.visibleParameter === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/MasterData/UnitBisnis.js

@@ -7,7 +7,8 @@ import UploadFile from "../../library/Upload";
 import MUIDataTable from "mui-datatables";
 import CreateUnitBisnis from "./formUnitBisnis/CreateUnitBisnis";
 import ReactTooltip from 'react-tooltip';
-import { TextField, InputBase } from "@material-ui/core";
+import MuiAlert from '@material-ui/lab/Alert';
+import { TextField, InputBase, Snackbar, withStyles } from "@material-ui/core";
 import { ExcelRenderer } from 'react-excel-renderer';
 import api from "../../api";
 import { isThisSecond } from "date-fns";
@@ -18,6 +19,9 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 const options2 = ct.customOptions2();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class UnitBisnis extends Component {
     constructor(props) {
         super(props)
@@ -32,7 +36,10 @@ export default class UnitBisnis extends Component {
             cols: null,
             rows: null,
             dataLoaded: false,
-            popupError: false
+            popupError: false,
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -193,10 +200,10 @@ export default class UnitBisnis extends Component {
                     })
                     this.setState({ dataTable: listData, listData: response.data.data })
                 } else {
-                    alert(response.data.message)
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                 }
             } else {
-                this.setState({ dataTable: [] })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', dataTable: [] })
             }
         })
     }
@@ -222,14 +229,18 @@ export default class UnitBisnis extends Component {
         }
         api.create().searchUnitBisnis(body).then(response => {
             // console.log(response.data);
-            if (response.data.status == 'success') {
-                let data = response.data.data
-                let listData = data.map((item, index) => {
-                    return [index, item.business_unit_id, item.business_unit_name, item.status]
-                })
-                this.setState({ dataTable: listData, listData: response.data.data })
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    let data = response.data.data
+                    let listData = data.map((item, index) => {
+                        return [index, item.business_unit_id, item.business_unit_name, item.status]
+                    })
+                    this.setState({ dataTable: listData, listData: response.data.data })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -237,22 +248,32 @@ export default class UnitBisnis extends Component {
     updateUnitBisnis = (payload) => {
         this.setState({ visibleEdit: false })
         api.create().updateUnitBisnis(payload).then(response => {
-            if (response.data.status == 'success') {
-                alert(response.data.message)
-                this.getData()
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getData()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
+
         })
     }
 
     createUnitBisnis = (payload) => {
         this.setState({ visibleCreate: false })
         api.create().createUnitBisnis(payload).then(response => {
-            if (response.data.status == 'success') {
-                this.getData()
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    this.getData()
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -290,14 +311,23 @@ export default class UnitBisnis extends Component {
     uploadUnitBisnis() {
         api.create().uploadUnitBisnis(this.state.payload).then(response => {
             console.log(response)
-            if (response.data.status === "success") {
-                alert(response.data.message)
-                this.getData()
-                this.setState({ visibleUnitBisnis: true })
+            if (response.data) {
+                if (response.data.status === "success") {
+                    this.getData()
+                    this.setState({ visibleUnitBisnis: true, alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     render() {
         const columns = [{
             name: "Action",
@@ -366,6 +396,11 @@ export default class UnitBisnis extends Component {
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
                 <div style={{ height: 199, 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}
+                    </Alert>
+                </Snackbar>
                 {this.state.visibleUnitBisnis === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>

src/container/Otorisasi/User.js

@@ -7,8 +7,10 @@ import AddUser from './User/AddUser';
 import EditUser from './User/EditUser'
 import api from "../../api";
 import { titleCase } from "../../library/Utils";
-import { InputAdornment, TextField, InputBase } from "@material-ui/core";
+import { InputAdornment, Snackbar, InputBase } from "@material-ui/core";
+import MuiAlert from '@material-ui/lab/Alert';
 import UploadFile from "../../library/Upload";
+import { withStyles } from '@material-ui/core/styles';
 import { ExcelRenderer } from 'react-excel-renderer';
 import ReactTooltip from "react-tooltip";
 import PopUpFailedSave from "../../library/PopUpFailedSave";
@@ -17,6 +19,9 @@ var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class UserRole extends Component {
   constructor(props) {
     super(props)
@@ -27,6 +32,9 @@ export default class UserRole extends Component {
       edit: false,
       visibleUser: true,
       buttonError: false,
+      alert: false,
+      tipeAlert: '',
+      messageAlert: ''
     }
   }
 
@@ -44,14 +52,22 @@ export default class UserRole extends Component {
 
   getUser() {
     api.create().getUser().then((response) => {
-      if (response.data.status === 'success') {
-        let data = response.data.data
-        let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
-          return [index, item.user_id, item.fullname === null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
-        })
-        this.setState({ listUser: listData })
+      if (response.data) {
+        if (response.ok) {
+            if (response.data.status === 'success') {
+                let data = response.data.data
+                let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
+                  return [index, item.user_id, item.fullname === null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
+                })
+                this.setState({ listUser: listData })
+            } else {
+                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+            }
+        } else {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })    
+        }
       } else {
-        alert(response.data.message)
+        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
       }
     })
   }
@@ -61,14 +77,22 @@ export default class UserRole extends Component {
       "keyword": this.state.search
     }
     api.create().searchUser(payload).then((response) => {
-      if (response.data.status === 'success') {
-        let data = response.data.data
-        let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
-          return [index, item.user_id, item.fullname == null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
-        })
-        this.setState({ listUser: listData })
+      if (response.data) {
+        if (response.ok) {
+            if (response.data.status === 'success') {
+                let data = response.data.data
+                let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
+                  return [index, item.user_id, item.fullname == null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
+                })
+                this.setState({ listUser: listData })
+              } else {                
+                  this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+              }
+        } else {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })    
+        }
       } else {
-        alert(response.data.message)
+        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
       }
     })
   }
@@ -281,16 +305,28 @@ export default class UserRole extends Component {
   uploadUser() {
     api.create().uploadUser(this.state.payload).then(response => {
       if (response.data) {
-        if (response.data.status === "success") {
-          console.log(response)
-          alert(response.data.message)
-          this.getUser()
-          this.setState({ visibleUser: true })
+        if (response.ok) {
+            if (response.data.status === "success") {
+                console.log(response)
+                alert(response.data.message)
+                this.getUser()
+                this.setState({ visibleUser: true })
+              } else {
+                  this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+              }
+        } else {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) 
         }
+      } else {
+        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) 
       }
     })
   }
 
+  closeAlert() {
+    this.setState({ alert: false })
+  }
+
   render() {
     const columns = [{
       name: "Action",
@@ -298,7 +334,7 @@ export default class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <div style={{ display: 'flex' }}>
-              {tableMeta.rowData[6] === "Aktif" ?
+              {/* {tableMeta.rowData[6] === "Aktif" ? */}
                 <button
                   style={{
                     backgroundColor: 'transparent',
@@ -310,9 +346,9 @@ export default class UserRole extends Component {
                 >
                   <img src={Images.editCopy} />
                 </button>
-                :
+                {/* :
                 null
-              }
+              } */}
             </div >
           );
         }
@@ -388,6 +424,11 @@ export default class UserRole extends Component {
       <div style={{ height: this.props.height }}>
         {/* <Row> */}
         <div className={"main-color"} style={{ height: 199, 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 }}>
             <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - User</label>

src/container/Otorisasi/User/AddUser.js

 import React, { Component } from 'react';
-import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
+import { TextField, Divider, Typography, Checkbox, withStyles, Collapse, Snackbar } from '@material-ui/core';
 import api from '../../../api';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { titleCase } from '../../../library/Utils';
@@ -10,6 +10,7 @@ import AddIcon from '@material-ui/icons/Add';
 import { DatePicker } from '@material-ui/pickers';
 import * as R from 'ramda'
 import Images from '../../../assets/Images';
+import MuiAlert from '@material-ui/lab/Alert';
 
 const CustomCheckbox = withStyles({
     root: {
@@ -31,6 +32,9 @@ const CustomCheckboxDisabled = withStyles({
     checked: {},
 })((props) => <Checkbox color="default" {...props} />);
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class AddUser extends Component {
 
     constructor(props) {
@@ -60,6 +64,9 @@ export default class AddUser extends Component {
             msgErrorRN: '',
             msgErrorSD: '',
             msgErrorED: '',
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
     }
 
@@ -169,8 +176,22 @@ export default class AddUser extends Component {
         api.create().createUser(payload).then((response) => {
             // console.log(response)
             // if (String(response.data.status).toLocaleUpperCase === 'Success' || String(response.data.status).toLocaleUpperCase === 'success') {
-            this.props.onClickClose()
-            this.props.refresh()
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                        this.props.onClickClose()
+                        this.props.refresh()
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+            }
+            
             // } else {
             // alert(response.data.message)
             //     this.props.onClickClose()
@@ -181,30 +202,48 @@ export default class AddUser extends Component {
 
     getRole() {
         api.create().getRoleActive().then((response) => {
-            if (response.data.status === 'success') {
-                let data = response.data.data
-                let roleData = data.map((item) => {
-                    return {
-                        role_id: item.role_id,
-                        role_name: item.role_name
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        let data = response.data.data
+                        let roleData = data.map((item) => {
+                            return {
+                                role_id: item.role_id,
+                                role_name: item.role_name
+                            }
+                        })
+                        let defaultProps = {
+                            options: roleData,
+                            getOptionLabel: (option) => titleCase(option.role_name),
+                        };
+                        this.setState({ listRole: defaultProps })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                     }
-                })
-                let defaultProps = {
-                    options: roleData,
-                    getOptionLabel: (option) => titleCase(option.role_name),
-                };
-                this.setState({ listRole: defaultProps })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
 
     getPerusahaan() {
         api.create().getPerusahaanHierarki().then((response) => {
-            if (response.data.status === 'success') {
-                this.setState({ listCompany: response.data.data })
-                console.log(response.data.data)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ listCompany: response.data.data })
+                        console.log(response.data.data)
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -327,9 +366,18 @@ export default class AddUser extends Component {
         return false;
     };
 
+    closeAlert() {
+      this.setState({ alert: false })
+    }
+
     render() {
         return (
             <div className="test app-popup-show">
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
                 <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                     <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                         <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>

src/container/Otorisasi/User/EditUser.js

 import React, { Component } from 'react';
-import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
+import { TextField, Divider, Typography, Checkbox, withStyles, Collapse, Snackbar } from '@material-ui/core';
 import api from '../../../api';
 import { titleCase } from '../../../library/Utils';
 import Autocomplete from '@material-ui/lab/Autocomplete';
@@ -9,6 +9,7 @@ import RemoveIcon from '@material-ui/icons/Remove';
 import AddIcon from '@material-ui/icons/Add';
 import * as R from 'ramda'
 import Images from '../../../assets/Images';
+import MuiAlert from '@material-ui/lab/Alert';
 
 const CustomCheckbox = withStyles({
     root: {
@@ -30,6 +31,9 @@ const CustomCheckboxDisabled = withStyles({
     checked: {},
 })((props) => <Checkbox color="default" {...props} />);
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class EditUser extends Component {
 
     constructor(props) {
@@ -54,6 +58,9 @@ export default class EditUser extends Component {
             msgErrorRN: '',
             msgErrorSD: '',
             msgErrorED: '',
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
     }
 
@@ -117,11 +124,19 @@ export default class EditUser extends Component {
     getDetailUser() {
         api.create().getDetailUser(this.state.paramsId).then((response) => {
             this.getRole()
-            if (response.data.status === 'success') {
-                this.setState({ tempData: response.data.data, company: response.data.data.company })
-                console.log(response.data.data)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ tempData: response.data.data, company: response.data.data.company })
+                        console.log(response.data.data)
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -168,42 +183,69 @@ export default class EditUser extends Component {
         }
 
         api.create().updateUser(payload).then((response) => {
-            if (response.data.status === 'success') {
-                this.props.onClickClose()
-                this.props.refresh()
+            if (response.data) {
+                if (response.ok) {               
+                    if (response.data.status === 'success') {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                        this.props.onClickClose()
+                        this.props.refresh()
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
 
     getRole() {
         api.create().getRoleActive().then((response) => {
-            if (response.data.status === 'success') {
-                let data = response.data.data
-                let roleData = data.map((item) => {
-                    return {
-                        role_id: item.role_id,
-                        role_name: item.role_name
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        let data = response.data.data
+                        let roleData = data.map((item) => {
+                            return {
+                                role_id: item.role_id,
+                                role_name: item.role_name
+                            }
+                        })
+                        let defaultProps = {
+                            options: roleData,
+                            getOptionLabel: (option) => titleCase(option.role_name),
+                        };
+
+                        let index = roleData.findIndex((val) => val.role_id === this.state.tempData.role_id)
+                        this.setState({ listRole: defaultProps, role: index === -1 ? roleData[0] : roleData[index] })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                     }
-                })
-                let defaultProps = {
-                    options: roleData,
-                    getOptionLabel: (option) => titleCase(option.role_name),
-                };
-
-                let index = roleData.findIndex((val) => val.role_id === this.state.tempData.role_id)
-                this.setState({ listRole: defaultProps, role: index === -1 ? roleData[0] : roleData[index] })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
 
     getPerusahaan() {
         api.create().getPerusahaanHierarki().then((response) => {
-            if (response.data.status === 'success') {
-                this.setState({ listCompany: response.data.data })
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ listCompany: response.data.data })
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -326,9 +368,18 @@ export default class EditUser extends Component {
         return false;
     };
 
+    closeAlert() {
+      this.setState({ alert: false })
+    }
+
     render() {
         return (
             <div className="test app-popup-show">
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
                 <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                     <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                         <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>

src/container/Otorisasi/UserRole.js

@@ -9,12 +9,18 @@ import api from "../../api";
 import { titleCase } from "../../library/Utils";
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '@material-ui/core/TextField';
-import { InputBase } from "@material-ui/core";
+import { InputBase, Snackbar } from "@material-ui/core";
 import ReactTooltip from "react-tooltip";
+import MuiAlert from '@material-ui/lab/Alert';
+import { withStyles } from '@material-ui/core/styles';
+
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 class UserRole extends Component {
   constructor(props) {
     super(props)
@@ -23,7 +29,10 @@ class UserRole extends Component {
       indexData: {},
       add: false,
       edit: false,
-      search: ''
+      search: '',
+      alert: false,
+      tipeAlert: '',
+      messageAlert: ''
     }
   }
 
@@ -41,22 +50,28 @@ class UserRole extends Component {
 
   getRole() {
     api.create().getRole().then((response) => {
-      // console.log(response)
-      if (response.data.status === 'success') {
-        let data = response.data.data
-        let listData = data.sort((a, b) => a.role_id - b.role_id).map((item, index) => {
-          return [index, item.role_id, item.role_name, item.access, item.status]
-        })
-        // console.log(listData)
-        this.setState({ listRole: listData })
-        // this.setState({listRole: response.data.data}, () => {
-        //   console.log(this.state.listRole)
-        // })
-
+      if (response.data) {
+        if (response.ok) {
+            if (response.data.status === 'success') {
+                let data = response.data.data
+                let listData = data.sort((a, b) => a.role_id - b.role_id).map((item, index) => {
+                  return [index, item.role_id, item.role_name, item.access, item.status]
+                })
+                // console.log(listData)
+                this.setState({ listRole: listData })
+                // this.setState({listRole: response.data.data}, () => {
+                //   console.log(this.state.listRole)
+                // })
+        
+              } else {
+                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+              }
+        } else {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+        }
       } else {
-        alert(response.data.message)
+            this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
       }
-      // console.log(response.data.data)
     })
   }
 
@@ -65,14 +80,22 @@ class UserRole extends Component {
       "keyword": this.state.search
     }
     api.create().searchRole(payload).then((response) => {
-      if (response.data.status === 'success') {
-        let data = response.data.data
-        let listData = data.sort((a, b) => a.role_id - b.role_id).map((item, index) => {
-          return [index, item.role_id, item.role_name, item.access, item.status]
-        })
-        this.setState({ listRole: listData })
+      if (response.data) {
+        if (response.ok) {
+            if (response.data.status === 'success') {
+                let data = response.data.data
+                let listData = data.sort((a, b) => a.role_id - b.role_id).map((item, index) => {
+                  return [index, item.role_id, item.role_name, item.access, item.status]
+                })
+                this.setState({ listRole: listData })
+              } else {
+                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+              }
+        } else {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+        }
       } else {
-        alert(response.data.message)
+            this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
       }
     })
   }
@@ -95,6 +118,10 @@ class UserRole extends Component {
     }))
   }
 
+  closeAlert() {
+    this.setState({ alert: false })
+  }
+
   render() {
     const columns = [{
       name: "Action",
@@ -113,7 +140,7 @@ class UserRole extends Component {
                 onClick={() => this.setState({ edit: true, indexData: tableMeta.rowData[1] })}
               >
                 <div style={{ display: 'flex' }}>
-                  {tableMeta.rowData[2] !== "superadmin" && tableMeta.rowData[4] === "Aktif" ?
+                  {tableMeta.rowData[2] !== "superadmin" ?
                     <img src={Images.editCopy} /> :
                     null
                   }
@@ -173,6 +200,11 @@ class UserRole extends Component {
       <div style={{ height: this.props.height }}>
         {/* <Row> */}
         <div className={"main-color"} style={{ height: 199, 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 }}>
             <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Role & Otorisasi</label>

src/container/Otorisasi/UserRole/AddRole.js

 import React, { Component } from 'react';
-import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
+import { TextField, Divider, Typography, Checkbox, withStyles, Collapse, Snackbar } from '@material-ui/core';
 import api from '../../../api';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
@@ -8,6 +8,7 @@ import format from "date-fns/format";
 import localeID from "date-fns/locale/id"
 import * as R from 'ramda'
 import Images from '../../../assets/Images';
+import MuiAlert from '@material-ui/lab/Alert';
 
 const CustomCheckbox = withStyles({
     root: {
@@ -20,6 +21,9 @@ const CustomCheckbox = withStyles({
     checked: {},
 })((props) => <Checkbox color="default" {...props} />);
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class AddRole extends Component {
 
     constructor(props) {
@@ -43,6 +47,9 @@ export default class AddRole extends Component {
             msgErrorED: '',
             application: [],
             setting: [],
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
     }
 
@@ -127,11 +134,20 @@ export default class AddRole extends Component {
         // console.log(payload)
         api.create().addRole(payload).then((response) => {
             console.log(response)
-            if (response.data.status === 'success') {
-                this.props.refresh()
-                this.props.onClickClose()
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                        this.props.refresh()
+                        this.props.onClickClose()
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -151,23 +167,31 @@ export default class AddRole extends Component {
 
     getMenu() {
         api.create().getMenu().then((response) => {
-            if (response.data.status === 'success') {
-                let app = null
-                let set = null
-                response.data.data.map((item) => {
-                    if (item.menu_name === "Application") {
-                        app = this.parseChildren(item.sub_menu)
-                        return app
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        let app = null
+                        let set = null
+                        response.data.data.map((item) => {
+                            if (item.menu_name === "Application") {
+                                app = this.parseChildren(item.sub_menu)
+                                return app
+                            } else {
+                                set = this.parseChildren(item.sub_menu)
+                                return set
+                            }
+                        })
+                        console.log(app)
+                        this.setState({ application: app, setting: set, isLoad: true }, () => console.log(this.state.application))
+                        // this.setState({ menuData: response.data.data })
                     } else {
-                        set = this.parseChildren(item.sub_menu)
-                        return set
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                     }
-                })
-                console.log(app)
-                this.setState({ application: app, setting: set, isLoad: true }, () => console.log(this.state.application))
-                // this.setState({ menuData: response.data.data })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -242,10 +266,19 @@ export default class AddRole extends Component {
         arr[index].collapse = !arr[index].collapse
         this.setState({ ...this.state.setting, setting: arr })
     }
+
+    closeAlert() {
+      this.setState({ alert: false })
+    }
     
     render() {
         return (
             <div className="test app-popup-show">
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
                 <div className="popup-content-middle background-white border-radius" style={{ borderRadius: 8 }}>
                     <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                         <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>

src/container/Otorisasi/UserRole/EditRole.js

 import React, { Component } from 'react';
-import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '@material-ui/core';
+import { TextField, Divider, Typography, Checkbox, withStyles, Collapse, Snackbar } from '@material-ui/core';
 import api from '../../../api';
 import AddIcon from '@material-ui/icons/Add';
 import RemoveIcon from '@material-ui/icons/Remove';
@@ -7,6 +7,8 @@ import { DatePicker } from "@material-ui/pickers";
 import format from "date-fns/format";
 import * as R from 'ramda'
 import Images from '../../../assets/Images';
+import MuiAlert from '@material-ui/lab/Alert';
+
 const CustomCheckbox = withStyles({
     root: {
         color: '#51c6ea',
@@ -18,6 +20,9 @@ const CustomCheckbox = withStyles({
     checked: {},
 })((props) => <Checkbox color="default" {...props} />);
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class EditRole extends Component {
 
     constructor(props) {
@@ -38,6 +43,9 @@ export default class EditRole extends Component {
             msgErrorED: '',
             application: [],
             setting: [],
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
     }
 
@@ -89,11 +97,19 @@ export default class EditRole extends Component {
 
     getDetailRole() {
         api.create().getDetailRole(this.state.paramsId).then((response) => {
-            if (response.data.status === 'success') {
-                this.setState({ tempData: response.data.data, privileges: response.data.data.privileges })
-                console.log(response.data.data.start_date)
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ tempData: response.data.data, privileges: response.data.data.privileges })
+                        console.log(response.data.data.start_date)
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -125,11 +141,20 @@ export default class EditRole extends Component {
         // console.log(payload)
         api.create().editRole(payload).then((response) => {
             console.log(response)
-            if (response.data.status === 'success') {
-                this.props.refresh()
-                this.props.onClickClose()
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' })
+                        this.props.refresh()
+                        this.props.onClickClose()
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -149,23 +174,31 @@ export default class EditRole extends Component {
 
     getMenu() {
         api.create().getMenu().then((response) => {
-            if (response.data.status === 'success') {
-                let app = null
-                let set = null
-                response.data.data.map((item) => {
-                    if (item.menu_name === "Application") {
-                        app = this.parseChildren(item.sub_menu)
-                        return app
+            if (response.data) {
+                if (response.ok) {
+                    if (response.data.status === 'success') {
+                        let app = null
+                        let set = null
+                        response.data.data.map((item) => {
+                            if (item.menu_name === "Application") {
+                                app = this.parseChildren(item.sub_menu)
+                                return app
+                            } else {
+                                set = this.parseChildren(item.sub_menu)
+                                return set
+                            }
+                        })
+                        console.log(app)
+                        this.setState({ application: app, setting: set, isLoad: true }, () => console.log(this.state.application))
+                        // this.setState({ menuData: response.data.data })
                     } else {
-                        set = this.parseChildren(item.sub_menu)
-                        return set
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
                     }
-                })
-                console.log(app)
-                this.setState({ application: app, setting: set, isLoad: true }, () => console.log(this.state.application))
-                // this.setState({ menuData: response.data.data })
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
             } else {
-                alert(response.data.message)
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
             }
         })
     }
@@ -241,9 +274,18 @@ export default class EditRole extends Component {
         return value
     }
 
+    closeAlert() {
+      this.setState({ alert: false })
+    }
+    
     render() {
         return (
             <div className="test app-popup-show">
+                <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                    <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                        {this.state.messageAlert}
+                    </Alert>
+                </Snackbar>
                 <div className="popup-content-middle background-white border-radius" style={{ borderRadius: 8 }}>
                     <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                         <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>

src/container/ResetPassword.js

 import React, { Component } from 'react';
 import Images from '../assets/Images';
-import { TextField, InputAdornment, Button, Typography, IconButton } from '@material-ui/core';
+import { TextField, InputAdornment, Button, Typography, IconButton, Snackbar } from '@material-ui/core';
 import Visibility from '@material-ui/icons/Visibility';
 import VisibilityOff from '@material-ui/icons/VisibilityOff';
+import MuiAlert from '@material-ui/lab/Alert';
+import { withStyles } from '@material-ui/core/styles';
 import api from '../api';
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
 
 class ResetPassword extends Component {
     constructor(props) {
@@ -18,7 +22,10 @@ class ResetPassword extends Component {
             errorConfirmPassword: false,
             msgPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
             msgConfirmPassword: 'Terdiri 8 karakter dengan kombinasi angka.',
-            userId: 0
+            userId: 0,
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''            
         }
     }
 
@@ -32,11 +39,15 @@ class ResetPassword extends Component {
 
     checkExpiredLink(userId) {
         api.create().isResetPassword(userId).then((response) => {
-            if (response.data.status == 'success') {
-                // 
+            if (response.data) {
+                if (response.data.status == 'success') {
+                    // 
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })  
+                    this.props.history.push('/login')
+                }
             } else {
-                alert(response.data.message)
-                this.props.history.push('/login')
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) 
             }
         })
     }
@@ -83,15 +94,27 @@ class ResetPassword extends Component {
         "user_id": this.state.userId  
       }
       api.create().resetPassword(payload).then((response) => {
-        if(response.data.status === 'success') {
-          alert('success')
-          this.props.history.push('/login')
-        } else {
-          alert(response.data.message)
-        }
+            if (response.data) {
+                if (response.ok) {
+                    if(response.data.status === 'success') {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'success' }) 
+                        this.props.history.push('/login')
+                    } else {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
+                    }
+                } else {
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                }
+            } else {
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) 
+            }
       })
     }
 
+    closeAlert() {
+        this.setState({ alert: false })
+    }
+
     handleChange(e) {
       let data = this.state
       this.setState({...data, [e.target.name] : e.target.value})
@@ -105,6 +128,11 @@ class ResetPassword extends Component {
     render() {
         return (
           <div style={{ flex: 1, display: 'flex', backgroundColor: '#152d40', height: '100vh', justifyContent: 'center', alignItems: 'center' }}>
+            <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
+                    {this.state.messageAlert}
+                </Alert>
+            </Snackbar>
               <div style={{padding: 56, display: 'flex', flexDirection: 'column', width: 378, height: 415, borderRadius: 12, boxShadow: '0 2 4 0 rgba(0, 0, 0, 0.2)', backgroundColor: '#ffffff', justifyContent: 'center', alignItems: 'center' }}>
                 <img src={Images.tia}/>
 

src/library/Upload.js

@@ -2,8 +2,12 @@ import React, { Component, createRef } from "react"
 import Dropzone from 'react-dropzone'
 import LinearProgress from '@material-ui/core/LinearProgress'
 import Images from "../assets/Images"
+import MuiAlert from '@material-ui/lab/Alert';
+import { withStyles, Snackbar } from "@material-ui/core";
 
 const dropzoneRef = createRef()
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
 
 class Upload extends Component {
     constructor(props) {
@@ -19,7 +23,9 @@ class Upload extends Component {
             iconButtonUpload: 'fa fa-1x fa-upload',
             uploadProgress: false,
             percentage: '0',
-            completed: '0'
+            completed: '0',
+            alert: false,
+            alertMessage: ''
         }
     }
 
@@ -64,7 +70,8 @@ class Upload extends Component {
                 uploadProgress: false,
                 percentage: '0'
             })
-            alert("Unsupported Media Type")
+            this.setState({ alertMessage: "Unsupported Media Type", alert: true })
+            // alert("Unsupported Media Type")
         }
     }
 
@@ -85,15 +92,20 @@ class Upload extends Component {
         // console.log(strState);
 
         if (strProps.includes(strState)) {
-            if (this.state.sizeFile < 1000000) {
+            if (this.state.sizeFile < 1000) {
                 this.props.onUpload()
             } else {
-                alert('File Tidak Boleh Lebih Dari 1MB')
+                this.setState({ alertMessage: 'File Tidak Boleh Lebih Dari 1MB', alert: true })
+                // alert('File Tidak Boleh Lebih Dari 1MB')
             }
         } else {
-            alert('File Tidak Mendukung')
+            this.setState({ alertMessage: 'File Tidak Mendukung', alert: true })
+            // alert('File Tidak Mendukung')
         }
+    }
 
+    closeAlert() {
+        this.setState({ alert: false })
     }
 
     render() {
@@ -102,6 +114,11 @@ class Upload extends Component {
                 <Dropzone ref={dropzoneRef} onDrop={this.onDrop}>
                     {({ getRootProps, getInputProps }) => (
                         <div>
+                            <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
+                                <Alert onClose={() => this.closeAlert()} severity={"warning"}>
+                                    {this.state.alertMessage}
+                                </Alert>
+                            </Snackbar>
                             <div className="upload-file">
 
                                 {/* label */}