Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into deni-dev(pc)

src/container/ApprovalMatrix/ApprovalMatrix.js

@@ -15,7 +15,8 @@ import PopUpDeleteAM from "./PopUpDeleteAM";
 import PopUpFailedSave from "../../library/PopUpFailedSave";
 import api from "../../api";
 import Constant from '../../library/Constant';
-
+import { css } from "@emotion/core";
+import PropagateLoader from "react-spinners/PropagateLoader"
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
@@ -49,6 +50,7 @@ export default class ApprovalMatrix extends Component {
             load: false,
             judul: '',
             popupDel: false,
+            loading: false
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -350,6 +352,7 @@ export default class ApprovalMatrix extends Component {
     }
 
     getData() {
+        this.setState({loading: true})
         api.create().getAM().then((response) => {
             // console.log(response)
             if (response.data) {
@@ -359,9 +362,13 @@ export default class ApprovalMatrix extends Component {
                         let listData = data.sort((a, b) => a.approval_matrix_id - b.approval_matrix_id).map((item, index) => {
                             return [index, item.approval_matrix_id, item.approval_type_name, item.orders, item.fullname, item.operator_type_name, item.status]
                         })
-                        this.setState({ dataTable: listData, listData: response.data.data })
+                        this.setState({ dataTable: listData, listData: response.data.data }, () => {
+                            setTimeout(() => {
+                              this.setState({loading: false})
+                            }, 2000);
+                          })
                     } else {
-                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
                             if (response.data.message.includes("Someone Logged In")) {
                                 setTimeout(() => {
                                     localStorage.removeItem(Constant.TOKEN)
@@ -371,10 +378,10 @@ export default class ApprovalMatrix extends Component {
                         })
                     }
                 } else {
-                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
                 }
             } else {
-                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
             }
         })
     }
@@ -723,7 +730,16 @@ export default class ApprovalMatrix extends Component {
                 }
             }
         }]
-
+        const loadingComponent = (
+            <div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
+              <PropagateLoader
+                // css={override}
+                size={20}
+                color={"#274B80"}
+                loading={this.state.loading}
+              />
+            </div>
+          );
         return (
             <div>
                 {this.state.visibleAM === true ?
@@ -827,6 +843,7 @@ export default class ApprovalMatrix extends Component {
                                 </div >
                             </div>
                             <div style={{ padding: 25, width: '100%' }}>
+                                {this.state.loading && loadingComponent}
                                 <MuiThemeProvider theme={getMuiTheme()}>
                                     <MUIDataTable
                                         theme={getMuiTheme()}

src/container/ApprovalMatrix/CreateApprovalMatrix.js

@@ -209,21 +209,21 @@ export default class CreateApprovalMatrix extends Component {
 
     validasi() {
         if (R.isNil(this.state.typeId)) {
-            this.setState({ errorType: true, msgErrType: 'Approval Type Cannot be Empty.' })
+            this.setState({ errorType: true, msgErrType: 'Approval Type Cannot be Empty' })
         }
         else if (R.isEmpty(this.state.order)) {
-            this.setState({ errorOrder: true, msgErrOrder: 'Order Cannot be Empty.'})
+            this.setState({ errorOrder: true, msgErrOrder: 'Order Cannot be Empty'})
         }
         else if (R.isNil(this.state.userId)) {
-            this.setState({ errorApproved: true, msgErrApproved: 'Approver Name Cannot be Empty.' })
+            this.setState({ errorApproved: true, msgErrApproved: 'Approver Name Cannot be Empty' })
         } 
         else if (R.isNil(this.state.operatorId)) {
             this.setState({ errorOperator: true, msgErrOperator: 'Operator Cannot be Empty. Please Choose - Option' })
         } 
         else if (R.isNil(this.state.startDate)) {
-            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty' })
         } else if (R.isNil(this.state.endDate)) {
-            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty' })
         } else {
             console.log('masuk');
             let payload = {

src/container/ApprovalMatrix/EditApprovalMatrix.js

@@ -249,21 +249,21 @@ export default class EditApprovalMatrix extends Component {
 
     validasi() {
         if (R.isNil(this.state.getTypes)) {
-            this.setState({ errorType: true, msgErrType: 'Approval Type Cannot be Empty.' })
+            this.setState({ errorType: true, msgErrType: 'Approval Type Cannot be Empty' })
         }
         else if (R.isEmpty(this.state.order)) {
-            this.setState({ errorOrder: true, msgErrOrder: 'Order Cannot be Empty.'})
+            this.setState({ errorOrder: true, msgErrOrder: 'Order Cannot be Empty'})
         }
         else if (R.isNil(this.state.getApprovedBy)) {
-            this.setState({ errorApproved: true, msgErrApproved: 'Approver Name Cannot be Empty.' })
+            this.setState({ errorApproved: true, msgErrApproved: 'Approver Name Cannot be Empty' })
         } 
         else if (R.isNil(this.state.getOperators)) {
-            this.setState({ errorOperator: true, msgErrOperator: 'Operator Cannot be Empty.' })
+            this.setState({ errorOperator: true, msgErrOperator: 'Operator Cannot be Empty' })
         } 
         else if (R.isEmpty(this.state.startDate)) {
-            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty' })
         } else if (R.isEmpty(this.state.endDate)) {
-            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty' })
         } else {
             console.log('masuk');
             if (this.props.type == 'edit') {

src/container/DocumentManagement/DocumentManagement.js

@@ -6,6 +6,7 @@ import ManualBookTia from './ManualBookTia'
 import api from '../../api'
 import AuditTahunan from './AuditTahunan'
 import CreateManagementDoc from './CreateManagementDoc'
+import QReview from './QReview'
 
 export default class DocumentManagement extends Component {
     constructor(props) {
@@ -19,6 +20,7 @@ export default class DocumentManagement extends Component {
 
     selectTab = (event, newEvent) => {
         this.setState({ tab: newEvent })
+        console.log(this.state.tab)
     }
 
     componentDidMount() {
@@ -32,6 +34,7 @@ export default class DocumentManagement extends Component {
                 id: response.data.data[0].document_category_id,
                 loadTable: true
             })
+            console.log(this.state.listData)
         })
     }
 
@@ -81,9 +84,16 @@ export default class DocumentManagement extends Component {
                                 this.state.id === 2 ?
                                     <AuditTahunan
                                         data={this.state.listData[this.state.tab]}
-                                    /> :
+                                    /> 
+                                :
                                 this.state.id === 1 ?
-                                        <ManualBookTia /> :
+                                    <ManualBookTia /> 
+                                :
+                                this.state.id === 3 ?
+                                    <QReview
+                                        data={this.state.listData[this.state.tab]}
+                                    /> 
+                                :
                                 <span>Test2</span>
 
                             )}

src/container/DocumentManagement/QReview.js

+import React, { Component } from 'react'
+import MUIDataTable from 'mui-datatables'
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+import api from '../../api';
+import CreateManagementDoc from './CreateManagementDoc';
+
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptionsManagementDocument();
+
+export default class AuditTahunan extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            dataTable: [],
+            visibleCreate: false
+        }
+    }
+
+    componentDidMount() {
+        console.log(this.props.data)
+        this.getData()
+    }
+
+    getData() {
+        let payload = {
+            "company_id": 1,
+            "document_category_id": 3
+        }
+
+        api.create().getAllDocument(payload).then(respone => {
+            let dataTable = respone.data.data.map(item => {
+                return [
+                    item.document_name,
+                    item.description,
+                    item.company_name,
+                    "",
+                    item.document_type,
+                    String(Number(item.document_size) / 1000 + ' MB'),
+                    item.created_by,
+                    item.created_at,
+                ]
+            })
+            this.setState({ dataTable })
+        })
+    }
+
+    render() {
+        let columns = [
+            "Nama File", "Keterangan", "Perusahaan", "Periode", "Tipe", "Ukuran", "Ditambahkan Oleh", "Ditambahkan Tanggal"
+        ]
+        return (
+            <div style={{ width: '100%' }}>
+                <div style={{ padding: 25 }}>
+                    <MuiThemeProvider theme={getMuiTheme()}>
+                        <MUIDataTable
+                            theme={getMuiTheme()}
+                            data={this.state.dataTable}
+                            columns={columns}
+                            options={options}
+                        />
+                    </MuiThemeProvider>
+                </div>
+            </div>
+        )
+    }
+}

src/container/ForgotPassword.js

@@ -43,9 +43,9 @@ class ForgotPassword extends Component {
         var isEmail = this.isEmail(this.state.email)
     
       if (this.state.email.trim() == "") {
-          this.setState({ errorEmail: true, msgEmail: 'Email Cannot be Empty.' })
+          this.setState({ errorEmail: true, msgEmail: 'Email Cannot be Empty' })
       } else if (!isEmail) {
-          this.setState({ errorEmail: true, msgEmail: 'Please enter a valid email address.' })
+          this.setState({ errorEmail: true, msgEmail: 'Please enter a valid email address' })
       } else {
           this.verification()
       }

src/container/Home.js

@@ -392,6 +392,7 @@ export default function MiniDrawer() {
   }
 
   const selectSub = (e) => {
+    setOpen(true)
     setSelectSub(e)
     setSelectedIndex("")
   }
@@ -399,6 +400,9 @@ export default function MiniDrawer() {
   const selectIndex = (e) => {
     setSelectSub("")
     setSelectedIndex(e)
+    // if (open == false) {
+      // setOpen(true)
+    // }
   }
 
   let { path, url } = useRouteMatch();
@@ -406,6 +410,7 @@ export default function MiniDrawer() {
   const { height, width } = UseWindowDimensions();
 
   function handleCollapse(item) {
+    setOpen(true);
     let arr = application
     let index = arr.findIndex((val) => val.label === item.label)
     arr[index].collapse = !arr[index].collapse
@@ -413,6 +418,7 @@ export default function MiniDrawer() {
   }
 
   function handleCollapseSetting(item) {
+    setOpen(true);
     let arr = setting
     let index = arr.findIndex((val) => val.label === item.label)
     arr[index].collapse = !arr[index].collapse

src/container/Login.js

@@ -75,11 +75,11 @@ class Login extends Component {
   validateLogin() {
     var isEmail = this.isEmail(this.state.email)
     if (this.state.email.trim() == "") {
-      this.setState({ errorEmail: true, msgEmail: 'Email Cannot be Empty.' })
+      this.setState({ errorEmail: true, msgEmail: 'Email Cannot be Empty' })
     } else if (!isEmail) {
-      this.setState({ errorEmail: true, msgEmail: 'Please enter a valid email address.' })
+      this.setState({ errorEmail: true, msgEmail: 'Please enter a valid email address' })
     } else if (this.state.password.trim() == "") {
-      this.setState({ errorPassword: true, msgPassword: 'Password Cannot be Empty.' })
+      this.setState({ errorPassword: true, msgPassword: 'Password Cannot be Empty' })
     } else {
       this.login()
     }

src/container/MasterData/Parameter/CreateParameter.js

@@ -423,25 +423,25 @@ export default class CreateParameter extends Component {
 
     validasi() {
         if (R.isNil(this.state.getTypes)) {
-            this.setState({ errorGroup: true, msgErrorGroup: 'Group Cannot be Empty.' })
+            this.setState({ errorGroup: true, msgErrorGroup: 'Group Cannot be Empty' })
         } else if (R.isNil(this.state.getParameter)) {
-            this.setState({ errorParameter: true, msgErrorParameter: 'Parameter Cannot be Empty.' })
+            this.setState({ errorParameter: true, msgErrorParameter: 'Parameter Cannot be Empty' })
         } else if (R.isNil(this.state.getPerusahaan)) {
-            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty.' })
+            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
             // } else if (R.isEmpty(this.state.tempData.description)) {
             //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
         } else if (R.isEmpty(this.state.tempData.value) && R.isEmpty(this.state.tempData.min_value) && R.isEmpty(this.state.tempData.max_value)) {
-            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty.' })
+            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty' })
         } else if ((!R.isEmpty(this.state.tempData.max_value) && R.isEmpty(this.state.tempData.min_value))) {
-            this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
+            this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty' })
         } else if (R.isNil(this.state.tempData.start_date)) {
-            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty' })
             // } else if (R.isNil(this.state.tempData.order)) {
             //     this.setState({ errorOrder: true, msgErrorOrder: 'Order tidak boleh kosong' })
         } else if ((!R.isEmpty(this.state.tempData.min_value) && R.isEmpty(this.state.tempData.max_value))) {
-            this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value Cannot be Empty.' })
+            this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value Cannot be Empty' })
         } else if (R.isNil(this.state.tempData.end_date)) {
-            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty' })
         } else {
             this.updateParameter()
         }
@@ -449,25 +449,25 @@ export default class CreateParameter extends Component {
 
     validasiCreate() {
         if (R.isNil(this.state.getTypes)) {
-            this.setState({ errorGroup: true, msgErrorGroup: 'Group Cannot be Empty.' })
+            this.setState({ errorGroup: true, msgErrorGroup: 'Group Cannot be Empty' })
         } else if (R.isNil(this.state.getParameter)) {
-            this.setState({ errorParameter: true, msgErrorParameter: 'Parameter Cannot be Empty.' })
+            this.setState({ errorParameter: true, msgErrorParameter: 'Parameter Cannot be Empty' })
         } else if (R.isNil(this.state.getPerusahaan)) {
-            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty.' })
+            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Cannot be Empty' })
             // } else if (R.isEmpty(this.state.description)) {
             //     this.setState({ errorDeskripsi: true, msgErrorDeskripsi: 'Deskripsi tidak boleh kosong' })
         } else if ((R.isEmpty(this.state.value) && R.isEmpty(this.state.maxValue) && R.isEmpty(this.state.minValue))) {
-            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty.' })
+            this.setState({ errorValue: true, msgErrorValue: 'Value Cannot be Empty' })
         } else if ((!R.isEmpty(this.state.maxValue) && R.isEmpty(this.state.minValue))) {
-            this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty.' })
+            this.setState({ errorMinValue: true, msgErrorMinValue: 'Min Value Cannot be Empty' })
         } else if (R.isNil(this.state.startDate)) {
-            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty' })
             // } else if (R.isNil(this.state.order)) {
             //     this.setState({ errorOrder: true, msgErrorOrder: 'Order tidak boleh kosong' })
         } else if ((!R.isEmpty(this.state.minValue) && R.isEmpty(this.state.maxValue))) {
-            this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value Cannot be Empty.' })
+            this.setState({ errorMaxValue: true, msgErrorMaxValue: 'Max Value Cannot be Empty' })
         } else if (R.isNil(this.state.endDate)) {
-            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty' })
         } else {
             this.createParameter()
         }

src/container/MasterData/Parameter/Parameter.js

@@ -12,6 +12,8 @@ import UploadFile from "../../../library/Upload";
 import { ExcelRenderer } from 'react-excel-renderer';
 import Constant from '../../../library/Constant';
 import PopUpDelete from '../../../library/PopUpDelete';
+import { css } from "@emotion/core";
+import PropagateLoader from "react-spinners/PropagateLoader"
 
 var ct = require("../../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
@@ -38,7 +40,8 @@ export default class Parameter extends Component {
             edit: false,
             delete: false,
             load: false,
-            judul: ''
+            judul: '',
+            loading: false
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -70,6 +73,7 @@ export default class Parameter extends Component {
     }
 
     getAllParameter() {
+        this.setState({loading: true})
         api.create().getAllParameter().then(response => {
             if (response.data) {
                 if (response.ok) {
@@ -91,9 +95,13 @@ export default class Parameter extends Component {
                                 item.status
                             ]
                         })
-                        this.setState({ dataTable: listData, data: response.data.data })
+                        this.setState({ dataTable: listData, data: response.data.data }, () => {
+                            setTimeout(() => {
+                              this.setState({loading: false})
+                            }, 2000);
+                          })
                     } else {
-                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
                             if (response.data.message.includes("Someone Logged In")) {
                                 setTimeout(() => {
                                     localStorage.removeItem(Constant.TOKEN)
@@ -103,10 +111,10 @@ export default class Parameter extends Component {
                         })
                     }
                 } else {
-                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
                 }
             } else {
-                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
             }
         })
     }
@@ -845,6 +853,16 @@ export default class Parameter extends Component {
             ["", "LAPORAN_BULANAN", "BALANCE_SHEET", "Daya Group", "Range Periode Lap", "4", "-", "1", "20", "Non Aktif"],
             ["", "-", "-", "-", "-", "-"]
         ]
+        const loadingComponent = (
+            <div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
+              <PropagateLoader
+                // css={override}
+                size={20}
+                color={"#274B80"}
+                loading={this.state.loading}
+              />
+            </div>
+          );
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
@@ -937,6 +955,7 @@ export default class Parameter extends Component {
 
                         )}
                         <div style={{ padding: 25 }}>
+                        {this.state.loading && loadingComponent}
                             <MuiThemeProvider theme={getMuiTheme()}>
                                 <MUIDataTable
                                     theme={getMuiTheme()}

src/container/MasterData/Perusahaan/CreatePerusahaan.js

@@ -262,15 +262,15 @@ export default class CreatePerusahaan extends Component {
 
     validasiEdit() {
         if (R.isEmpty(this.state.company)) {
-            this.setState({ errorNP: true, msgErrorNP: 'Company Name Cannot be Empty.' })
+            this.setState({ errorNP: true, msgErrorNP: 'Company Name Cannot be Empty' })
         } else if (R.isNil(this.state.getPerusahaan)) {
-            this.setState({ errorPC: true, msgErrorPC: 'Parent Company Cannot be Empty.' })
+            this.setState({ errorPC: true, msgErrorPC: 'Parent Company Cannot be Empty' })
         } else if (R.isNil(this.state.getTypes)) {
-            this.setState({ errorUB: true, msgErrorUB: 'Business Unit Cannot be Empty.' })        
+            this.setState({ errorUB: true, msgErrorUB: 'Business Unit Cannot be Empty' })        
         } else if (R.isNil(this.state.startDate)) {
-            this.setState({ errorSD: true, msgErrorSD: 'Valid From Cannot be Empty.' })
+            this.setState({ errorSD: true, msgErrorSD: 'Valid From Cannot be Empty' })
         } else if (R.isNil(this.state.endDate)) {
-            this.setState({ errorED: true, msgErrorED: 'Valid To Cannot be Empty.' })
+            this.setState({ errorED: true, msgErrorED: 'Valid To Cannot be Empty' })
         } else {
             let payload = {
                 "company_id": this.state.companyID,

src/container/MasterData/Perusahaan/Perusahaan.js

@@ -18,6 +18,8 @@ import { TextField, InputBase, Snackbar, withStyles } from "@material-ui/core";
 import PopUpFailedSave from '../../../library/PopUpFailedSave';
 import PopUpDelete from "../../../library/PopUpDelete";
 import Constant from '../../../library/Constant';
+import { css } from "@emotion/core";
+import PropagateLoader from "react-spinners/PropagateLoader"
 
 var ct = require("../../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
@@ -53,7 +55,8 @@ export default class Perusahaan extends Component {
             load: false,
             judul: '',
             rowData: [],
-            companyName: ''
+            companyName: '',
+            loading: false
 
         }
         this.fileHandler = this.fileHandler.bind(this);
@@ -295,6 +298,7 @@ export default class Perusahaan extends Component {
     }
 
     getData() {
+        this.setState({loading: true})
         api.create().getPerusahaan().then((response) => {
             // console.log(response)
             if (response.data) {
@@ -304,9 +308,13 @@ export default class Perusahaan extends Component {
                         let listData = data.sort((a, b) => a.company_id - b.company_id).map((item, index) => {
                             return [index, item.company_id, item.company_name, item.parent_name, item.business_unit_name, item.status]
                         })
-                        this.setState({ dataTable: listData, listData: response.data.data })
+                        this.setState({ dataTable: listData, listData: response.data.data }, () => {
+                            setTimeout(() => {
+                              this.setState({loading: false})
+                            }, 2000);
+                          })
                     } else {
-                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
                             if (response.data.message.includes("Someone Logged In")) {
                                 setTimeout(() => {
                                     localStorage.removeItem(Constant.TOKEN)
@@ -316,10 +324,10 @@ export default class Perusahaan extends Component {
                         })
                     }
                 } else {
-                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
                 }
             } else {
-                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
             }
         })
     }
@@ -642,6 +650,16 @@ export default class Perusahaan extends Component {
             ["", "4", "Puninar Infinite Raya", "Puninar Group", "Service", "5", "Non Aktif"],
             ["", "-", "-", "-", "-", "-"],
         ]
+        const loadingComponent = (
+            <div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
+              <PropagateLoader
+                // css={override}
+                size={20}
+                color={"#274B80"}
+                loading={this.state.loading}
+              />
+            </div>
+          );
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
@@ -745,6 +763,7 @@ export default class Perusahaan extends Component {
                                 </div>
                             </div>
                             <div style={{ padding: 25 }}>
+                            {this.state.loading && loadingComponent}
                                 <MuiThemeProvider theme={getMuiTheme()}>
                                     <MUIDataTable
                                         theme={getMuiTheme()}

src/container/MasterData/ReportItems.js

@@ -14,6 +14,8 @@ import ReactTooltip from "react-tooltip";
 import PopUpFailedSave from "../../library/PopUpFailedSave";
 import Constant from "../../library/Constant";
 import PopUpDelete from "../../library/PopUpDelete";
+import { css } from "@emotion/core";
+import PropagateLoader from "react-spinners/PropagateLoader"
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
@@ -49,7 +51,8 @@ export default class ReportItems extends Component {
             judul: '',
             reportNameDelete: '',
             visibleDelete: false,
-            invalidTemplate: false
+            invalidTemplate: false,
+            loading: false
         }
 
         this.fileHandler = this.fileHandler.bind(this);
@@ -597,6 +600,7 @@ export default class ReportItems extends Component {
     }
 
     getData() {
+        this.setState({loading: true})
         api.create().getReportItems().then((response) => {
             console.log(response)
             if (response.data) {
@@ -607,10 +611,12 @@ export default class ReportItems extends Component {
                             return [index, item.item_report_id, item.report_name, item.company_name, item.order, item.description, item.parent, item.uom, item.weight, item.type_item_report_name, item.kpi_type, item.max_ach, item.formula_ytd, item.status]
                         })
                         this.setState({ dataTable: listData, listData: response.data.data }, () => {
-                            console.log(this.state.dataTable);
+                            setTimeout(() => {
+                              this.setState({loading: false})
+                            }, 2000);
                         })
                     } else {
-                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
                             if (response.data.message.includes("Someone Logged In")) {
                                 setTimeout(() => {
                                     localStorage.removeItem(Constant.TOKEN)
@@ -620,10 +626,10 @@ export default class ReportItems extends Component {
                         })
                     }
                 } else {
-                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
                 }
             } else {
-                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
             }
         })
     }
@@ -1038,7 +1044,16 @@ export default class ReportItems extends Component {
             ["", "4", "KPI", "TIA", "4", "EBITDA", "1", "Rp Bio", "0%", "Formula", "Non Aktif"],
             ["", "-", "-", "-", "-", "-", "-", "-", "-", "-", "-"],
         ]
-
+        const loadingComponent = (
+            <div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
+              <PropagateLoader
+                // css={override}
+                size={20}
+                color={"#274B80"}
+                loading={this.state.loading}
+              />
+            </div>
+          );
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
@@ -1141,6 +1156,7 @@ export default class ReportItems extends Component {
                                 </div>
                             </div>
                             <div style={{ padding: 25 }}>
+                            {this.state.loading && loadingComponent}
                                 <MuiThemeProvider theme={getMuiTheme()}>
                                     <MUIDataTable
                                         theme={getMuiTheme()}

src/container/MasterData/UnitBisnis.js

@@ -15,6 +15,8 @@ import { isThisSecond } from "date-fns";
 import PopUpFailedSave from "../../library/PopUpFailedSave";
 import PopUpDelete from "../../library/PopUpDelete";
 import Constant from "../../library/Constant";
+import { css } from "@emotion/core";
+import PropagateLoader from "react-spinners/PropagateLoader"
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
@@ -49,8 +51,9 @@ export default class UnitBisnis extends Component {
             load: false,
             judul: '',
             rowData: [],
-            unitBisnisName: ''
-            // visibleLoad: true
+            unitBisnisName: '',
+            // visibleLoad: true,
+            loading: false
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -244,6 +247,7 @@ export default class UnitBisnis extends Component {
     }
 
     getData() {
+        this.setState({loading: true})
         api.create().getUnitBisnis().then((response) => {
             // console.log(response)
             if (response.data) {
@@ -253,9 +257,13 @@ export default class UnitBisnis extends Component {
                         let listData = data.sort((a, b) => a.business_unit_id - b.business_unit_id).map((item, index) => {
                             return [index, item.business_unit_id, item.business_unit_name, item.status]
                         })
-                        this.setState({ dataTable: listData, listData: response.data.data })
+                        this.setState({ dataTable: listData, listData: response.data.data }, () => {
+                            setTimeout(() => {
+                              this.setState({loading: false})
+                            }, 2000);
+                          })
                     } else {
-                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+                        this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
                             if (response.data.message.includes("Someone Logged In")) {
                                 setTimeout(() => {
                                     localStorage.removeItem(Constant.TOKEN)
@@ -265,10 +273,10 @@ export default class UnitBisnis extends Component {
                         })
                     }
                 } else {
-                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })
+                    this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error', loading: false })
                 }
             } else {
-                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
+                this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error', loading: false })
             }
         })
     }
@@ -562,6 +570,16 @@ export default class UnitBisnis extends Component {
             ["", "4", "Service", "Non Aktif"],
             ["", "-", "-", "-"],
         ]
+        const loadingComponent = (
+            <div style={{position: 'absolute', zIndex: 110, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)'}}>
+              <PropagateLoader
+                // css={override}
+                size={20}
+                color={"#274B80"}
+                loading={this.state.loading}
+              />
+            </div>
+          );
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
@@ -651,6 +669,7 @@ export default class UnitBisnis extends Component {
                                 </div>
                             </div>
                             <div style={{ padding: 25 }}>
+                            {this.state.loading && loadingComponent}
                                 <MuiThemeProvider theme={getMuiTheme()}>
                                     <MUIDataTable
                                         theme={getMuiTheme()}

src/container/MasterData/formReportItems/CreateReportItems.js

@@ -153,32 +153,32 @@ export default class CreateReportItems extends Component {
     validasi() {
         // alert('coba ya')
         if (R.isNil(this.state.reportType)) {
-            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report Type Cannot be Empty.'})
+            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report Type Cannot be Empty'})
         } else if (R.isNil(this.state.company)){
-            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Name Cannot be Empty.'})
+            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Name Cannot be Empty'})
         } else if (R.isEmpty(this.state.order)) {
-            this.setState({ errorOrder: true, msgErrorOrder: 'Order Cannot be Empty.' })
+            this.setState({ errorOrder: true, msgErrorOrder: 'Order Cannot be Empty' })
         }
         else if (R.isEmpty(this.state.description)) {
-            this.setState({ errorDesc: true, msgErrorDesc: 'Description Cannot be Empty.' })
+            this.setState({ errorDesc: true, msgErrorDesc: 'Description Cannot be Empty' })
         }
         else if (R.isNil(this.state.InputType)) {
-            this.setState({ errorTipeData: true, msgErrorTipeData: 'Data Type Cannot be Empty.' })
+            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 Cannot be Empty.' })
+            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: 'True Value Cannot be Empty.' })
+            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: 'False Condition Cannot be Empty.' })
+            this.setState({ errorCondition: true, msgErrorCondition: 'False Condition Cannot be Empty' })
         }
         else if (R.isNil(this.state.startDate)) {
-            this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
         }
         else if (R.isNil(this.state.endDate)) {
-            this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
         }
         else {
             this.addReportItems()

src/container/MasterData/formReportItems/EditReportItems.js

@@ -135,25 +135,25 @@ export default class EditReportItems extends Component {
     validasi() {
         // alert('coba ya')
         if (R.isNil(this.state.reportType)){
-            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report Type Cannot be Empty.'})
+            this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report Type Cannot be Empty'})
         } else if (R.isNil(this.state.company)){
-            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Name Cannot be Empty.'})
+            this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company Name Cannot be Empty'})
         } else if (R.isEmpty(this.state.tempData.order)) {
-            this.setState({ errorOrder: true, msgErrorOrder: 'Order Cannot be Empty.' })
+            this.setState({ errorOrder: true, msgErrorOrder: 'Order Cannot be Empty' })
         } else if (R.isEmpty(this.state.tempData.description)) {
-            this.setState({ errorDesc: true, msgErrorDesc: 'Description Cannot be Empty.' })
+            this.setState({ errorDesc: true, msgErrorDesc: 'Description Cannot be Empty' })
         } else if (R.isNil(this.state.InputType)) {
-            this.setState({ errorTipeData: true, msgErrorTipeData: 'Data Type Cannot be Empty.' })
+            this.setState({ errorTipeData: true, msgErrorTipeData: 'Data Type Cannot be Empty' })
         } else if ((this.state.InputType.type_item_report_name === 'Formula' && R.isEmpty(this.state.tempData.formula)) || (this.state.InputType.type_item_report_name === 'Validation' && R.isEmpty(this.state.tempData.formula))) {
-            this.setState({ errorFormula: true, msgErrorFormula: 'Formula Cannot be Empty.' })
+            this.setState({ errorFormula: true, msgErrorFormula: 'Formula Cannot be Empty' })
         } else if (this.state.InputType.type_item_report_name === 'Validation' && R.isEmpty(this.state.tempData.condition_it_should_be)) {
-            this.setState({ errorRV: true, msgErrorRV: 'True Value Cannot be Empty.' })
+            this.setState({ errorRV: true, msgErrorRV: 'True Value Cannot be Empty' })
         } else if (this.state.InputType.type_item_report_name === 'Validation' && R.isNil(this.state.tempData.condition_if_wrong)) {
-            this.setState({ errorCondition: true, msgErrorCondition: 'False Condition Cannot be Empty.' })
+            this.setState({ errorCondition: true, msgErrorCondition: 'False Condition Cannot be Empty' })
         } else if (R.isNil(this.state.tempData.start_date)) {
-            this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorSD: 'Valid From Cannot be Empty' })
         } else if (R.isNil(this.state.tempData.end_date)) {
-            this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorED: 'Valid To Cannot be Empty' })
         } else {
             this.updateReportItems()
         }

src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js

@@ -124,11 +124,11 @@ export default class CreateUnitBisnis extends Component {
 
     validasi() {
         if (R.isEmpty(this.state.name)) {
-            this.setState({ errorName: true, msgErrorName: 'Business Unit Cannot be Empty.' })
+            this.setState({ errorName: true, msgErrorName: 'Business Unit Cannot be Empty' })
         } else if (R.isEmpty(this.state.startDate)) {
-            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty' })
         } else if (R.isEmpty(this.state.endDate) || this.state.endDate === null) {
-            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty' })
         } else {
             let payload = {
                 "business_unit_id": this.state.id,
@@ -142,11 +142,11 @@ export default class CreateUnitBisnis extends Component {
 
     validasiCreate() {
         if (R.isEmpty(this.state.name)) {
-            this.setState({ errorName: true, msgErrorName: 'Business Unit Cannot be Empty.' })
+            this.setState({ errorName: true, msgErrorName: 'Business Unit Cannot be Empty' })
         } else if (R.isNil(this.state.startDate)) {
-            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty.' })
+            this.setState({ errorStartDate: true, msgErrorStartDate: 'Valid From Cannot be Empty' })
         } else if (R.isNil(this.state.endDate)) {
-            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty.' })
+            this.setState({ errorEndDate: true, msgErrorEndDate: 'Valid To Cannot be Empty' })
         } else {
             let payload = {
                 "business_unit_name": this.state.name,

src/container/Otorisasi/User.js

@@ -16,9 +16,6 @@ import ReactTooltip from "react-tooltip";
 import PopUpFailedSave from "../../library/PopUpFailedSave";
 import Constant from "../../library/Constant";
 import { css } from "@emotion/core";
-import HashLoader from "react-spinners/HashLoader";
-import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader"
-import SkewLoader from "react-spinners/SkewLoader"
 import PropagateLoader from "react-spinners/PropagateLoader"
 
 const override = css`
@@ -95,7 +92,7 @@ export default class UserRole extends Component {
               }, 2000);
             })
           } else {
-            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }, () => {
+            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning', loading: false }, () => {
               if (response.data.message.includes("Someone Logged In")) {
                 setTimeout(() => {
                   localStorage.removeItem(Constant.TOKEN)

src/container/ResetPassword.js

@@ -20,8 +20,8 @@ class ResetPassword extends Component {
       showPass2: false,
       errorPassword: false,
       errorConfirmPassword: false,
-      msgPassword: 'Consists of 8 Characters with a Combination of Numbers.',
-      msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers.',
+      msgPassword: 'Consists of 8 Characters with a Combination of Numbers',
+      msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers',
       userId: 0,
       alert: false,
       tipeAlert: '',
@@ -68,17 +68,17 @@ class ResetPassword extends Component {
 
   validateReset() {
     if (this.state.password.trim() == "") {
-      this.setState({ errorPassword: true, msgPassword: 'New Password Cannot be Empty.' })
+      this.setState({ errorPassword: true, msgPassword: 'New Password Cannot be Empty' })
     } else if (this.state.password.length < 8) {
-      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Minimum length : 8.' })
+      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Minimum length : 8' })
     } else if (this.isEmail(this.state.password)) {
-      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Should not be same as Email Address.' })
+      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Should not be same as Email Address' })
     } else if (!this.isRegex(this.state.password)) {
-      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Must using combination of characters, letters and numbers.' })
+      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Must using combination of characters, letters and numbers' })
     } else if (this.state.confirmPassword.trim() == "") {
-      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Repeat Password Cannot be Empty.' })
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Repeat Password Cannot be Empty' })
     } else if (this.state.password !== this.state.confirmPassword) {
-      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'The password and password confirmation do not match.' })
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'The password and password confirmation do not match' })
     } 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: 'Consists of 8 Characters with a Combination of Numbers.' })
+      this.setState({ errorPassword: false, msgPassword: 'Consists of 8 Characters with a Combination of Numbers' })
     } else if (e.target.name == "confirmPassword") {
-      this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers.' })
+      this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers' })
     }
   }
 

src/container/Screen404.js

@@ -14,7 +14,7 @@ export default function NoMatch() {
           <img src={Images.tia}/>
         </div>
         <h3 style={{marginTop: 20}}>
-          '<code>{location.pathname}</code>' Not Found
+          '<code>{location.pathname}</code>' Coming Soon !
         </h3>
       </div>
     </div>

src/container/SetPassword.js

@@ -20,8 +20,8 @@ class SetPassword extends Component {
       showPass2: false,
       errorPassword: false,
       errorConfirmPassword: false,
-      msgPassword: 'Consists of 8 Characters with a Combination of Numbers.',
-      msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers.',
+      msgPassword: 'Consists of 8 Characters with a Combination of Numbers',
+      msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers',
       userId: 0,
       alert: false,
       tipeAlert: '',
@@ -68,17 +68,17 @@ class SetPassword extends Component {
 
   validateReset() {
     if (this.state.password.trim() == "") {
-      this.setState({ errorPassword: true, msgPassword: 'New Password Cannot be Empty.' })
+      this.setState({ errorPassword: true, msgPassword: 'New Password Cannot be Empty' })
     } else if (this.state.password.length < 8) {
-      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Minimum length : 8.' })
+      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Minimum length : 8' })
     } else if (this.isEmail(this.state.password)) {
-      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Should not be same as Email Address.' })
+      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Should not be same as Email Address' })
     } else if (!this.isRegex(this.state.password)) {
-      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Must using combination of characters, letters and numbers.' })
+      this.setState({ errorPassword: true, msgPassword: 'Invalid password. Must using combination of characters, letters and numbers' })
     } else if (this.state.confirmPassword.trim() == "") {
-      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Repeat Password Cannot be Empty.' })
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'Repeat Password Cannot be Empty' })
     } else if (this.state.password !== this.state.confirmPassword) {
-      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'The password and password confirmation do not match.' })
+      this.setState({ errorConfirmPassword: true, msgConfirmPassword: 'The password and password confirmation do not match' })
     } else {
       this.confirmPassword()
     }
@@ -119,9 +119,9 @@ class SetPassword 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: 'Consists of 8 Characters with a Combination of Numbers.' })
+      this.setState({ errorPassword: false, msgPassword: 'Consists of 8 Characters with a Combination of Numbers' })
     } else if (e.target.name == "confirmPassword") {
-      this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers.' })
+      this.setState({ errorConfirmPassword: false, msgConfirmPassword: 'Consists of 8 Characters with a Combination of Numbers' })
     }
   }