Initial commit

package-lock.json

@@ -11767,6 +11767,11 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-loading": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
+      "integrity": "sha512-Vdqy79zq+bpeWJqC+xjltUjuGApyoItPgL0vgVfcJHhqwU7bAMKzysfGW/ADu6i0z0JiOCRJjo+IkFNkRNbA3A=="
+    },
     "react-popper": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.4.tgz",

package.json

@@ -16,6 +16,7 @@
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-expand-collapse": "^0.2.0",
+    "react-loading": "^2.0.3",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",

src/App.js

 import React, { Component } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import PrivateRoute from './PrivateRoute';
+import CreateDocumentRoute from './CreateDocumentRoute';
+import YourDocumentRoute from './YourDocumentRoute';
+import ManageUserRoute from './ManageUserRoute';
 import FormLogin from './FormLogin';
 import Home from './Home';
 import PreviewDocument from './PreviewDocument';
@@ -21,12 +24,12 @@ class App extends Component {
             <Route exact path='/' component={FormLogin} />
             <PrivateRoute exact path="/home" component={Home} />
             <PrivateRoute exact path="/previewdocument" component={PreviewDocument}/>
-            <PrivateRoute exact path="/yourdocument" component={YourDocument} />
-            <PrivateRoute exact path="/manageuser" component={ManageUser} />
-            <PrivateRoute exact path="/formcreateupdaterole" component={FormCreateUpdateRole} />
-            <PrivateRoute exact path="/formcreatedocument" component={FormCreateDocument} />
-            <PrivateRoute exact path="/formapprover" component={FormApprover} />
-            <PrivateRoute exact path="/formrevision" component={FormRevision} />
+            <YourDocumentRoute exact path="/yourdocument" component={YourDocument} />
+            <ManageUserRoute exact path="/manageuser" component={ManageUser} />
+            <ManageUserRoute exact path="/formcreateupdaterole" component={FormCreateUpdateRole} />
+            <CreateDocumentRoute exact path="/formcreatedocument" component={FormCreateDocument} />
+            <YourDocumentRoute exact path="/formapprover" component={FormApprover} />
+            <YourDocumentRoute exact path="/formrevision" component={FormRevision} />
             <Route path='*' component={NotFoundPage} />
           </Switch>
       </BrowserRouter>

src/CreateDocumentRoute.js

+import React from 'react'
+import { Redirect, Route } from 'react-router-dom'
+
+const CreateDocumentRoute = ({ component: Component, ...rest }) => {
+    return (
+        <Route
+            {...rest}
+            render={
+                props =>
+                localStorage.getItem("user") && localStorage.getItem("loginUserRole").includes("Creator") ? (
+                    <Component {...props} />
+                ) : (
+                    <Redirect to={{ pathname: '/', state: { from: props.location } }} />
+                )
+            } 
+        />
+    )
+}
+
+export default CreateDocumentRoute;
\ No newline at end of file

src/DataTableHome.js

@@ -6,21 +6,59 @@ $.DataTable = require('datatables.net');
 export class DataTableHome extends Component {
     componentDidMount = () => {
         this.$el = $(this.el)
-        this.$el.DataTable({
-            "data": this.props.data,
-            "columns": [
-                { "title": "Code" },
+        var table = this.$el.DataTable({
+            data: this.props.data,
+            columns: [
+                { title: "No", width: 30 },
+                { title: "Code" },
+                { title: "Subject" },
+                { title: "Type" },
+                { title: "Revision Date" },
+                { title: "Effective Date" },
+                { title: "Business Process" },
+            ],
+            columnDefs: [
                 {
-                    "title": "Subject",
-                    "fnCreatedCell": function (nTd, data) {
-                        $(nTd).html("<a class='text-decoration-none' href='http://10.10.86.48:3000/previewdocument?subject=" + data + "' target='_blank' rel='noopener noreferrer'>" + data + "</a>");
+                    searchable: false,
+                    orderable: false,
+                    targets: 0
+                },
+                {
+                    orderable: false,
+                    targets: 1,
+                    render: function (data, type, row) {
+                        return "<a class='text-decoration-none' href='#'>" + data + "</a>";
+                    }
+                    //<a class='text-decoration-none' href='http://localhost:3000/previewdocument?subject=" + data + "' target='_blank' rel='noopener noreferrer'>" + data + "</a>
+                },
+                {
+                    orderable: false,
+                    targets: 2,
+                    render: function (data, type, row) {
+                        return "<a class='text-decoration-none' href='#'>" + data + "</a>";
                     }
                 },
-                { "title": "Type" },
-                { "title": "Revision Date" },
-                { "title": "Effective Date" },
-                { "title": "Business Process" },
-            ]
+                {
+                    orderable: false,
+                    targets: 4
+                },
+                {
+                    orderable: false,
+                    targets: 5
+                },
+            ],
+            order: [[ 1, "asc" ]],
+            lengthMenu: [[25, 50, 75, 100], [25, 50, 75, 100]]
+        })
+        table.on("order.dt search.dt", function () {
+            table.column(0, {search:"applied", order:"applied"}).nodes().each( function (cell, i) {
+                cell.innerHTML = i+1;
+            } );
+        } ).draw();
+        table.on("click", "a", function (e) {
+            e.preventDefault();
+            let data = table.row($(this).parents("tr")).data();
+            window.open("http://10.10.86.48:3000/previewdocument?subject=" + data[2], "_blank");
         })
     }
     componentWillUnmount = () => {

src/DataTableManageUser.js

@@ -3,41 +3,79 @@ import './DocumentManagement.css';
 
 const $ = require('jquery');
 $.DataTable = require('datatables.net');
-$(document).ready(function() {
-    $("#btn-delete").click(function(){
-        alert("Ini button delete!");
-    }); 
-});
 
 export class DataTableManageUser extends Component {
     componentDidMount = () => {
         this.$el = $(this.el)
-        this.$el.DataTable({
-            "data": this.props.data,
-            "columns": [
-                { "title": "No" },
-                { "title": "User Id" },
-                { "title": "User Name" },
-                { "title": "Department" },
-                { "title": "Role" },
-                { "title": "Manager Name" },
-                { "title": "Email" },
+        var table = this.$el.DataTable({
+            data: this.props.data,
+            columns: [
+                { title: "No", width: 30 },
+                { title: "User Name" },
+                { title: "Department" },
+                { title: "Role" },
+                { title: "Manager Name" },
+                { title: "Email" },
+                { title: "Action", width: 190 },
+            ],
+            columnDefs: [
                 {
-                    "title": "Action",
-                    "render": function (data, type, row) {
-                        return "<a href='/formcreateupdaterole?edit=" + data + "' target='_self' rel='noopener noreferrer'><button type='button' class='button-1 btn btn-success'>Edit</button></a>&nbsp;<a href='/manageuser?delete=" + data + "' target='_self' rel='noopener noreferrer'><button type='button' class='button-1 btn btn-danger'>Delete</button></a>";
+                    targets: [-1], render: function (data, type, row) {
+                        return "<a href='/formcreateupdaterole?edit=" + data + "' target='_self' rel='noopener noreferrer'><button name='btn-edit' class='button-1 btn btn-success'>Edit</button></a>&nbsp;<button name='btn-delete' class='button-1 btn btn-danger'>Delete</button>";
                     }
                 },
-            ]
+                {
+                    searchable: false,
+                    orderable: false,
+                    targets: 0
+                },
+                {
+                    orderable: false,
+                    targets: 1
+                },
+                {
+                    orderable: false,
+                    targets: 4
+                },
+                {
+                    orderable: false,
+                    targets: 5
+                },
+                {
+                    searchable: false,
+                    orderable: false,
+                    targets: 6
+                },
+            ],
+            order: [[ 1, "asc" ]],
+            lengthMenu: [[25, 50, 75, 100], [25, 50, 75, 100]]
+        })
+        table.on("order.dt search.dt", function () {
+            table.column(0, {search:"applied", order:"applied"}).nodes().each( function (cell, i) {
+                cell.innerHTML = i+1;
+            } );
+        } ).draw();
+        table.on("click", "button[name = 'btn-delete']", function () {
+            let data = table.row($(this).parents("tr")).data();
+            let isDelete = window.confirm("Are you sure want to delete " + data[1] + "?");
+            if (isDelete) {
+                // process.env.REACT_APP_MAIN_APIURL
+                fetch(process.env.REACT_APP_MAIN_APIURL + '/user/', {
+                    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
+                    method: 'DELETE',
+                    body: 'email=' + data[5]
+                }).then(res => {
+                    window.location.reload();
+                    alert("Data has been deleted!");
+                }).catch(err => {
+                    alert(err + "");
+                })
+            }
         })
     }
-    $
     componentWillUnmount = () => {
         this.$el.DataTable.destroy(true);
     }
-    handleDeleteRole = () => {
-        alert("Ini tombol delete!");
-    }
     render() {
         return (
             <div>

src/DataTableYourDocument.js

@@ -6,16 +6,58 @@ $.DataTable = require('datatables.net');
 export class DataTableYourDocument extends Component {
     componentDidMount = () => {
         this.$el = $(this.el)
-        this.$el.DataTable({
-            "data": this.props.data,
-            "columns": [
-                { "title": "No" },
-                { "title": "Code" },
-                { "title": "Subject" },
-                { "title": "Status" },
-                { "title": "Tracking" },
-                { "title": "Creator" },
-            ]
+        var table = this.$el.DataTable({
+            data: this.props.data,
+            columns: [
+                { title: "No", width: 30 },
+                { title: "Code" },
+                { title: "Subject" },
+                { title: "Status" },
+                { title: "Tracking" },
+                { title: "Creator" },
+            ],
+            columnDefs: [
+                {
+                    searchable: false,
+                    orderable: false,
+                    targets: 0
+                },
+                {
+                    orderable: false,
+                    targets: 1,
+                    render: function (data, type, row) {
+                        return "<a class='text-decoration-none' href='#'>" + data + "</a>";
+                    }
+                },
+                {
+                    orderable: false,
+                    targets: 2
+                },
+                {
+                    orderable: false,
+                    targets: 3
+                },
+                {
+                    orderable: false,
+                    targets: 4
+                },
+                {
+                    orderable: false,
+                    targets: 5
+                }
+            ],
+            order: [[ 1, "asc" ]],
+            lengthMenu: [[25, 50, 75, 100], [25, 50, 75, 100]]
+        })
+        table.on("order.dt search.dt", function () {
+            table.column(0, {search:"applied", order:"applied"}).nodes().each( function (cell, i) {
+                cell.innerHTML = i+1;
+            } );
+        } ).draw();
+        table.on("click", "a", function (e) {
+            e.preventDefault();
+            let data = table.row($(this).parents("tr")).data();
+            window.open("http://10.10.86.48:3000/previewdocument?subject=" + data[2], "_blank");
         })
     }
     componentWillUnmount = () => {

src/DocumentManagement.css

@@ -5,6 +5,9 @@
     text-align: center;
     margin-top: 6%;
 }
+.content-loading {
+    margin-top: 20%;
+}
 .login-form {
     padding-top: 5rem;
     padding-bottom: 5rem;

src/FormCreateDocument.js

@@ -607,6 +607,16 @@ class FormCreate extends Component {
             await this.setState({ submitForm: true })
             var js2xmlparser = require('js2xmlparser');
             var parseString = require('xml2js').parseString;
+            // Check is exist document with same subject
+            let responseDataCheckSubject = await axios.get(process.env.REACT_APP_MAIN_APIURL + '/DocumentManagement/document/' + this.state.subject, { headers: { 'accept': 'application/xml' } })
+            let dataCheckSubject;
+            parseString(responseDataCheckSubject.data, function (err, result) {
+                dataCheckSubject = result.documentCollection.document;
+            })
+            if (dataCheckSubject != undefined && dataCheckSubject[0].doc_code[0].includes(this.state.businessUnit)) {
+                this.setState({ submitForm: false })
+                alert("Document with same subject is already exist in your department!");
+            } else {
                 //Get All Data Login
                 let responseDataLogin = await axios.get(process.env.REACT_APP_MAIN_APIURL + '/DocumentManagement/userkey/' + JSON.parse(localStorage.getItem("user")).Email, { headers: { 'accept': 'application/xml' } })
                 let user_id, doc_id;
@@ -669,6 +679,7 @@ class FormCreate extends Component {
                         this.props.history.push("/yourdocument")
                     }
                 }
+            }
         } catch (error) {
             await this.setState({ submitForm: false })
             alert(error + "");

src/FormCreateUpdateRole.js

@@ -150,6 +150,13 @@ class FormCreateUpdateRole extends Component {
         } else {
             try {
                 await this.setState({ submitForm: true })
+                let responseCheckDataUser = await axios.get(process.env.REACT_APP_MAIN_APIURL + '/DocumentManagement/userkey/' + this.state.email, { headers: { 'accept': 'application/xml' } })
+                console.log();
+                let checkDataUser;
+                parseString(responseCheckDataUser.data, function (err, result) {
+                    checkDataUser = result.user_dataCollection.user_data;
+                })
+                if (checkDataUser == undefined) {
                     let uri_email = encodeURIComponent(this.state.email);
                     let API_token = "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsIng1dCI6IlpqUm1ZVE13TlRKak9XVTVNbUl6TWpnek5ESTNZMkl5TW1JeVkyRXpNamRoWmpWaU1qYzBaZz09In0.eyJhdWQiOiJodHRwOlwvXC9vcmcud3NvMi5hcGltZ3RcL2dhdGV3YXkiLCJzdWIiOiJhZG1pbkBjYXJib24uc3VwZXIiLCJhcHBsaWNhdGlvbiI6eyJvd25lciI6ImFkbWluIiwidGllciI6IjEwUGVyTWluIiwibmFtZSI6ImFwcGwiLCJpZCI6MTMsInV1aWQiOm51bGx9LCJzY29wZSI6ImFtX2FwcGxpY2F0aW9uX3Njb3BlIGRlZmF1bHQiLCJpc3MiOiJodHRwczpcL1wvMTAuMTAuODguMTI6OTQ0M1wvb2F1dGgyXC90b2tlbiIsInRpZXJJbmZvIjp7IlVubGltaXRlZCI6eyJzdG9wT25RdW90YVJlYWNoIjp0cnVlLCJzcGlrZUFycmVzdExpbWl0IjowLCJzcGlrZUFycmVzdFVuaXQiOm51bGx9fSwia2V5dHlwZSI6IlBST0RVQ1RJT04iLCJzdWJzY3JpYmVkQVBJcyI6W3sic3Vic2NyaWJlclRlbmFudERvbWFpbiI6ImNhcmJvbi5zdXBlciIsIm5hbWUiOiJlbXBsb3llZV9wcm9maWxlIiwiY29udGV4dCI6IlwvZW1weWxcLzEuMC4wIiwicHVibGlzaGVyIjoiYWRtaW4iLCJ2ZXJzaW9uIjoiMS4wLjAiLCJzdWJzY3JpcHRpb25UaWVyIjoiVW5saW1pdGVkIn1dLCJjb25zdW1lcktleSI6ImlqMHNnaWVLVVprdFBTbElkcl9mU2tFanI1a2EiLCJleHAiOjE2MzUyOTk3NDYsImlhdCI6MTU4MDk3ODc0NiwianRpIjoiNDFlM2FlMGYtMmYzZC00NWIzLTllN2YtMjI5YjRiNTkwOWE1In0.ZZ1_-3Z2bnsa5ar7b-QnuNGy95Olh5rQSMifJCTnW09T9omU1Zzql1Wllaey7veC9xy6yi-WxPpPeRee_-UtZdloGE9PCd99rMdNLsNuXWxmN0MvyXjMYqUvOYe9lbXzirE99yQhywa7LzVxpJVccGl42a5HhJ-BHF85IXiSSKK_-ykssK2WNfQhyUySJoz-lUj44-Eur2svbEWTVX6sOaejdwdv3xBFya8WoAAXPaelaE0Fm2SONQdh4DZZx0OdJS794fcYGNKshdTJiAG7Kau1jQMjy6-Pa3fv8wpFxV7GQuQy24TeTBo3jNxX2Fu5b2-P_YFIgA1KuqSM9Fnp2Q";
                     fetch('http://10.10.88.12:8280/empyl/1.0.0/employee/' + uri_email, {
@@ -188,6 +195,10 @@ class FormCreateUpdateRole extends Component {
                                 alert("Email is invalid!")
                             }
                         })
+                } else {
+                    this.setState({ submitForm: false })
+                    alert("Email is already exist");
+                }
             } catch (error) {
                 this.setState({ submitForm: false })
                 alert(error + "");

src/FormLogin.js

-import React from 'react';
+import React, { Component } from 'react';
 import { Navbar, NavbarBrand, Button } from 'reactstrap';
 import { createStore } from 'redux';
+import axios from 'axios';
 import sessionReducer from './sessionReducer';
 import './DocumentManagement.css';
-import axios from 'axios';
 
-class FormLogin extends React.Component {
+class FormLogin extends Component {
     constructor(props) {
         super(props)
         this.state = {
@@ -29,28 +29,39 @@ class FormLogin extends React.Component {
         }
     }
     handleSubmitLogin = async () => {
-        await this.setState({ submitted: true })
+        await this.setState({ submitted: true, loggingIn: true, isLoginFailed: false })
         if (this.state.username != "" && this.state.password != "") {
-            axios.get('/signin', {
+            try {
+                let responseDataLoginLDAP = await axios.get('/signin', {
                     params: {
                         uid: this.state.username,
                         pwd: this.state.password,
                         key: '2ffb2a00a3abe029fdebae5e1d417ebcb04b7e103a0cd8b54763051cef08bc55'
                     }
                 })
-                .then((res) => {
-                    if(res.data.code == 401) {
+                if (responseDataLoginLDAP.data.code == 401) {
                     this.setState({ isLoginFailed: true, loggingIn: false, errMessage: "Username or Password is Invalid!" })
                 } else {
+                    var parseString = require('xml2js').parseString;
+                    let responseDataUser = await axios.get(process.env.REACT_APP_MAIN_APIURL + '/DocumentManagement/userkey/' + responseDataLoginLDAP.data.Email, { headers: { 'accept': 'application/xml' } })
+                    let dataUser;
+                    parseString(responseDataUser.data, function (err, result) {
+                        dataUser = result.user_dataCollection.user_data;
+                    })
+                    if (dataUser != undefined) {
+                        localStorage.setItem('loginUserDpt', dataUser[0].user_dpt[0]);
+                        localStorage.setItem('loginUserRole', dataUser[0].user_role[0]);
                         let store = createStore(sessionReducer);
-                        let todoAction = { type: "add_session", payload: res.data };
+                        let todoAction = { type: "add_session", payload: responseDataLoginLDAP.data };
                         store.dispatch(todoAction);
                         this.props.history.push("/home"); 
+                    } else {
+                        this.setState({ isLoginFailed: true, loggingIn: false, errMessage: "Your account is not Registered!" })
+                    }
+                }
+            } catch (error) {
+                this.setState({ isLoginFailed: true, loggingIn: false, errMessage: "" + error })
             }
-                })
-                .catch((err) => {
-                    this.setState({ isLoginFailed: true, loggingIn: false, errMessage: "" + err })
-                });
             // let URLItop = "http://10.10.88.182:8280/services/VionaApi/auth";
             // fetch(URLItop, {
             //     method: "GET",

src/Home.js

@@ -24,6 +24,7 @@ class Home extends Component {
             if (data != undefined) {
                 for (let i = 0; i < data.length; i++) {
                     let datarow = [];
+                    datarow.push("");
                     datarow.push(data[i].doc_code[0]);
                     datarow.push(data[i].subject[0]);
                     datarow.push(data[i].doc_type[0]);

src/ManageUser.js

 import React, { Component } from 'react';
 import { Button } from 'reactstrap';
-import { connect } from 'react-redux';
 import axios from 'axios';
 import Navbar1 from './Navbar';
-import queryString from 'query-string';
 import './DocumentManagement.css';
 import { DataTableManageUser } from './DataTableManageUser';
 
@@ -17,37 +15,7 @@ class ManageUser extends Component {
     }
     componentDidMount = async () => {
         try {
-            var js2xmlparser = require('js2xmlparser');
             var parseString = require('xml2js').parseString;
-            if (this.props.location.search != "") {
-                let values = queryString.parse(this.props.location.search);
-                if (values.delete != "") {
-                    let dataUser = {
-                        "_deleteuserdelete_user_id": {
-                            "user_id": values.delete
-                        }
-                    }
-                    let deleteDataUser = js2xmlparser.parse("_deleteuserdelete_user_id", dataUser);
-                    axios.delete(process.env.REACT_APP_MAIN_APIURL + '/DocumentManagement/userdelete/' + values.delete, {
-                        params: {
-                            "_deleteuserdelete_user_id": {
-                                "user_id": values.delete
-                            }
-                        },
-                        headers : {
-                            'Content-Type': 'application/json',
-                            'Accept': 'application/json',
-                            'Transfer-Encoding': 'chunked'
-                        }
-                    })
-                    .then(res => {
-                        console.log(res);
-                        this.props.history.push("/manageuser");
-                    }).catch(err => {
-                        this.props.history.push("/manageuser");
-                    })
-                }
-            }
             let response = await axios.get(process.env.REACT_APP_MAIN_APIURL + '/DocumentManagement/user', { headers: { 'accept': 'application/xml' } });
             let data;
             parseString(response.data, function (err, result) {
@@ -56,8 +24,7 @@ class ManageUser extends Component {
             if (data != undefined) {
                 for (let i = 0; i < data.length; i++) {
                     let datarow = [];
-                    datarow.push(i+1);
-                    datarow.push(data[i].user_id[0]);
+                    datarow.push("");
                     datarow.push(data[i].user_name[0]);
                     datarow.push(data[i].user_dpt[0]);
                     datarow.push(data[i].user_role[0]);
@@ -67,9 +34,9 @@ class ManageUser extends Component {
                     this.state.dataUser.push(datarow);
                 }
             }
-            this.setState({ fetchStatus: true})
+            this.setState({ fetchStatus: true })
         } catch (error) {
-            this.setState({ fetchStatus: true})
+            this.setState({ fetchStatus: true })
             console.log(error + "");
         }
     }
@@ -78,26 +45,20 @@ class ManageUser extends Component {
         return (
             <div>
                 <Navbar1 menu="manageuser" /><br />
-                {
-                    this.state.fetchStatus == true &&
                 <div className="container-fluid">
                     <div className="form-group row">
                         <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12">
                             <Button className="center-block" color="primary" href="/formcreateupdaterole">Add User</Button>
                         </div>
                     </div>
+                    {
+                        this.state.fetchStatus == true && 
                         <DataTableManageUser data={this.state.dataUser}></DataTableManageUser>
-                    </div>
                     }
                 </div>
+            </div>
         )
     }
 }
 
-const mapStateToProps = (state) => {
-    return {
+export default ManageUser;
\ No newline at end of file
-        session: state.session
-    }
-}
-
-export default connect(mapStateToProps)(ManageUser);
\ No newline at end of file

src/ManageUserRoute.js

+import React from 'react'
+import { Redirect, Route } from 'react-router-dom'
+
+const ManageUserRoute = ({ component: Component, ...rest }) => {
+    return (
+        <Route
+            {...rest}
+            render={
+                props =>
+                localStorage.getItem("user") && localStorage.getItem("loginUserRole").includes("Admin") ? (
+                    <Component {...props} />
+                ) : (
+                    <Redirect to={{ pathname: '/', state: { from: props.location } }} />
+                )
+            } 
+        />
+    )
+}
+
+export default ManageUserRoute;
\ No newline at end of file

src/Navbar.js

@@ -24,6 +24,8 @@ const Navbar1 = (props) => {
                                 </SvgIcon> Home
                             </NavLink>
                         </NavItem>
+                        {
+                            localStorage.getItem("loginUserRole") != "View" &&
                             <NavItem>
                                 <NavLink className={"text-" + (props.menu == "yourdocument" ? "warning" : "light")} href="/yourdocument">
                                     <SvgIcon>
@@ -31,6 +33,9 @@ const Navbar1 = (props) => {
                                     </SvgIcon> Your Document
                                 </NavLink>
                             </NavItem>
+                        }
+                        {
+                            localStorage.getItem("loginUserRole").includes("Admin") &&
                             <NavItem>
                                 <NavLink className={"text-" + (props.menu == "manageuser" ? "warning" : "light")} href="/manageuser">
                                     <SvgIcon>
@@ -38,6 +43,7 @@ const Navbar1 = (props) => {
                                     </SvgIcon> Manage User
                                 </NavLink>
                             </NavItem>
+                        }
                         <NavItem>
                             <NavLink className="text-light" href="/" onClick={handleSignOut}>
                                 <SvgIcon>

src/PreviewDocument.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import queryString from 'query-string';
 import axios from 'axios';
+import ReactLoading from 'react-loading';
 import './DocumentManagement.css';
 
 class PreviewDocument extends Component {
@@ -113,6 +114,19 @@ class PreviewDocument extends Component {
         const { session } = this.props;
         return (
             <div>
+                {
+                    this.state.isFetched == false && this.state.isDocumentNotFound == false &&
+                    <div className="container">
+                        <div className="row justify-content-center">
+                            <div className="content-loading">
+                                <div className="form-group row">
+                                    <h3 className="text-center">Retrieving Data </h3>
+                                    <ReactLoading type="bubbles" color="dark" width="40px" height="20px"></ReactLoading>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                }
                 {
                     this.state.isNotValidLocation == true &&
                     <div className="header-top-2">
@@ -150,7 +164,7 @@ class PreviewDocument extends Component {
                                 </div>
                                 <hr />
                                 <h3 className="text-center">Sejarah Dokumen</h3><br />
-                                <table className="my-table table table-striped table-hover">
+                                <table className="my-table table table-bordered">
                                     <thead>
                                         <tr>
                                             <th className="col-xl-4 col-lg-4 col-md-4 col-sm-4">Revisi</th>

src/PrivateRoute.js

@@ -7,7 +7,7 @@ const PrivateRoute = ({ component: Component, ...rest }) => {
             {...rest}
             render={
                 props =>
-                localStorage.getItem('user') ? (
+                localStorage.getItem("user") ? (
                     <Component {...props} />
                 ) : (
                     <Redirect to={{ pathname: '/', state: { from: props.location } }} />

src/YourDocument.js

 import React, { Component } from 'react';
 import { Button } from 'reactstrap';
-import { connect } from 'react-redux';
 import axios from 'axios';
 import Navbar1 from './Navbar';
 import { DataTableYourDocument } from './DataTableYourDocument';
@@ -21,15 +20,17 @@ class YourDocument extends Component {
             parseString(response1.data, function (err, result) {
                 user_id = result.user_dataCollection.user_data[0].user_id[0];
             })
+            console.log("User id", user_id);
             let response2 = await axios.get(process.env.REACT_APP_MAIN_APIURL + '/DocumentManagement/yourdocument/' + user_id, { headers: { 'accept': 'application/xml' } });
             let data;
             parseString(response2.data, function (err, result) {
                 data = result.documentCollection.document;
             })
+            console.log("Data", data);
             if (data != undefined) {
                 for (let i = 0; i < data.length; i++) {
                     let datarow = [];
-                    datarow.push(i+1);
+                    datarow.push("");
                     datarow.push(data[i].doc_code[0]);
                     datarow.push(data[i].subject[0]);
                     datarow.push(data[i].doc_status[0]);
@@ -37,10 +38,10 @@ class YourDocument extends Component {
                     datarow.push(JSON.parse(localStorage.getItem("user"))["Full Name"])
                     this.state.dataDocument.push(datarow);
                 }
-                this.setState({ fetchStatus: true})
             }
+            this.setState({ fetchStatus: true })
         } catch (error) {
-            this.setState({ fetchStatus: true})
+            this.setState({ fetchStatus: true })
             console.log(error + "");
         }
     }
@@ -49,26 +50,20 @@ class YourDocument extends Component {
         return (
             <div>
                 <Navbar1 menu="yourdocument" /><br />
-                {
-                    this.state.fetchStatus == true &&
                 <div className="container-fluid">
                     <div className="form-group row">
                         <div className="col-xl-12 col-lg-12 col-md-12 col-sm-12">
-                                <Button className="center-block" color="primary" href="/formcreatedocument">Create New Document</Button>
+                            <Button className="center-block" color="primary" href="/formcreatedocument" disabled={ !localStorage.getItem("loginUserRole").includes("Creator") }>Create New Document</Button>
                         </div>
                     </div>
+                    {
+                        this.state.fetchStatus == true &&
                         <DataTableYourDocument data={this.state.dataDocument}></DataTableYourDocument>
-                    </div>
                     }
                 </div>
+            </div>
         )
     }
 }
 
-const mapStateToProps = (state) => {
-    return {
+export default YourDocument;
\ No newline at end of file
-        session: state.session
-    }
-}
-
-export default connect(mapStateToProps)(YourDocument);
\ No newline at end of file

src/YourDocumentRoute.js

+import React from 'react'
+import { Redirect, Route } from 'react-router-dom'
+
+const YourDocumentRoute = ({ component: Component, ...rest }) => {
+    return (
+        <Route
+            {...rest}
+            render={
+                props =>
+                localStorage.getItem("user") && localStorage.getItem("loginUserRole") != "View" ? (
+                    <Component {...props} />
+                ) : (
+                    <Redirect to={{ pathname: '/', state: { from: props.location } }} />
+                )
+            } 
+        />
+    )
+}
+
+export default YourDocumentRoute;
\ No newline at end of file