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

package.json

 {
   "name": "my-app",
   "version": "0.1.0",
+  "homepage": "http://localhost:8080/tia-web/",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.0",

src/Utils/Index.js

@@ -29,6 +29,8 @@ function FadeMenu() {
 
     const handleClose = () => {
         setAnchorEl(null);
+        localStorage.clear()
+        window.location.reload();
     };
 
     const classes = useStyles();

src/api/index.js

@@ -61,6 +61,12 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
   //
   const getRoot = () => api.get('')
   const login = (body) => api.post('auth/login', body)
+  
+  //Role
+  const getRole = () => api.get('role/get_all_role')
+  const addRole = (body) => api.post('role/create_role', body)
+  const editRole = (body) => api.post('role/update_role', body)
+  const deleteRole = (roleId) => api.post(`role/delete_role/${roleId}`)
   // ------
   // STEP 3
   // ------
@@ -77,6 +83,10 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
     // a list of the API functions from step 2
     getRoot,
     login,
+    getRole,
+    addRole,
+    editRole,
+    deleteRole,
   }
 }
 

src/assets/Images.js

@@ -18,6 +18,7 @@ const Images = {
     green: require('./green.svg'),
     red: require('./red.svg'),
     ceklis: require('./ceklis.png'),
+    check: require('./check.svg'),
     approval: require('./approval.svg'),
     template: require('./template.svg'),
     upload: require('./upload.svg'),

src/assets/check.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd" transform="translate(-4 -4)">
+        <path d="M0 0H24V24H0z"/>
+        <rect width="15" height="15" x="4.5" y="4.5" fill="#47B6AD" stroke="#47B6AD" rx="3"/>
+        <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.8 9L10.605 14.423 8 11.711"/>
+    </g>
+</svg>

src/assets/sass/app.css

@@ -84,12 +84,15 @@
     -o-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
     transition: all 0.35s cubic-bezier(0, 1, 0.5, 1); }
     .app-popup-show {
-      display: block;
+      display: flex;
       -webkit-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
       -moz-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
       -ms-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
       -o-transition: all 0.35s cubic-bezier(0, 1, 0.5, 1);
-      transition: all 0.35s cubic-bezier(0, 1, 0.5, 1); }
+      transition: all 0.35s cubic-bezier(0, 1, 0.5, 1); 
+      /* display: '';  */
+      justify-content: 'center'; 
+      align-items: 'center' }
       .popup-content {
         position: relative;
         margin: auto;

src/container/BudgetTahunan/BalanceSheet.js

@@ -15,7 +15,7 @@ const style = {
 };
 const style2 = {
     position: "sticky",
-    left: 448,
+    left: 420,
     background: "white",
     zIndex: 101
 };
@@ -56,7 +56,7 @@ export default class BalanceSheet extends Component {
                 setCellProps: () => ({
                     style: {
                         position: "sticky",
-                        left: 448,
+                        left: 420,
                         background: "white",
                         zIndex: 101
                     }
@@ -253,7 +253,7 @@ export default class BalanceSheet extends Component {
             ["Trade Receivables - Third Party", "142,668", "77,480"],
         ]
         return (
-            <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
+            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
                 <div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
                 </div>
@@ -269,7 +269,7 @@ export default class BalanceSheet extends Component {
                                 <Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
                             </div>
 
-                            <div style={{ marginTop: 20, width: 1350 }}>
+                            <div style={{ marginTop: 20, width: '100%' }}>
                                 <MuiThemeProvider theme={getMuiTheme()}>
                                     <MUIDataTable
                                         data={dataTable}

src/container/Login.js

@@ -43,8 +43,8 @@ class Login extends Component {
   }
     api.create().login(payload).then((response) => {
       if (response.data.status === 'success') {
-        this.props.history.push('/home/beranda')
         localStorage.setItem(Constant.TOKEN, response.data.data.token)
+        this.props.history.push('/home/beranda')
       } else {
         alert(response.data.message)
       }

src/container/Otorisasi/UserRole.js

@@ -6,6 +6,8 @@ import Images from "../../assets/Images";
 import MUIDataTable from "mui-datatables";
 import AddRole from './UserRole/AddRole';
 import EditRole from './UserRole/EditRole'
+import api from "../../api";
+import { titleCase } from "../../library/Utils";
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
@@ -15,10 +17,45 @@ export default class UserRole extends Component {
   constructor(props) {
     super(props)
     this.state = {
+      listRole: [],
+      paramsData: {},
       add: false,
       edit: false
     }
   }
+
+  componentDidMount() {
+    this.getRole()
+  }
+
+  closeEdit() {
+    this.setState({edit: false})
+  }
+
+  closeAdd() {
+    this.setState({add: false})
+  }
+
+  getRole() {
+    api.create().getRole().then((response) => {
+      if (response.data.status == 'success') {
+        let data = response.data.data
+        let listData = data.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 {
+        alert(response.data.message)
+      }
+      // console.log(response.data.data)
+    })
+  }
+
   render() {
     const columns = [{
       name: "Action",
@@ -32,7 +69,7 @@ export default class UserRole extends Component {
                   cursor: 'pointer',
                   borderColor: 'transparent',
                 }}
-                onClick={() => this.setState({edit: true})}
+                onClick={() => this.setState({edit: true, paramsData: tableMeta.rowData})}
               >
                 <img src={Images.editCopy} />
               </button>
@@ -57,12 +94,23 @@ export default class UserRole extends Component {
         customBodyRender: (val, tableMeta) => {
           return (
             <div style={{ display: 'flex', width: 250 }}>
-              {val}
+              {titleCase(val)}
+            </div >
+          );
+        }
+      }
+    }, {
+      name: "Hak Akses",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex'}}>
+              {val + ' Modul'}
             </div >
           );
         }
       }
-    }, "Hak Akses", "Status"]
+    }, "Status"]
     const data = [
       ["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
       ["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
@@ -80,7 +128,7 @@ export default class UserRole extends Component {
             <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
               <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
                 <SearchIcon/>
-                <input type="text" style={{flexGrow: 1, marginLeft: 10}}/>
+                <input type="text" placeholder={'Search Role'} style={{flexGrow: 1, marginLeft: 10}}/>
               </div>
             </div>
             {/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
@@ -91,15 +139,25 @@ export default class UserRole extends Component {
           <div style={{ padding: 25 }}>
             <MuiThemeProvider theme={getMuiTheme()}>
               <MUIDataTable
-                data={data}
+                data={this.state.listRole}
                 columns={columns}
                 options={options}
               />
             </MuiThemeProvider>
           </div>
         </div>
-        {this.state.add && <AddRole/>}
-        {this.state.edit && <EditRole/>}
+        {this.state.add && (
+          <AddRole 
+          onClickClose={this.closeAdd.bind(this)}
+            data={this.state.paramsData}
+          />
+        )}
+        {this.state.edit && (
+          <EditRole 
+          onClickClose={this.closeEdit.bind(this)}
+            data={this.state.paramsData}
+          />
+        )}
       </div>
     );
   }

src/container/Otorisasi/UserRole/AddRole.js

@@ -4,7 +4,7 @@ import { TextField } from '@material-ui/core';
 export default class CreateUnitBisnis extends Component {
     render() {
         return (
-            <div className="test app-popup-show" style={{ paddingTop: 100 }}>
+            <div className="test app-popup-show" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                 <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                     <div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                         <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
@@ -62,7 +62,6 @@ export default class CreateUnitBisnis extends Component {
                                 </TextField>
                             </div>
                         </div>
-
                     </div>
 
                     <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>

src/container/Otorisasi/UserRole/EditRole.js

@@ -4,7 +4,7 @@ import { TextField } from '@material-ui/core';
 export default class CreateUnitBisnis extends Component {
     render() {
         return (
-            <div className="test app-popup-show" style={{ paddingTop: 100 }}>
+            <div className="test app-popup-show">
                 <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
                     <div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                         <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
@@ -29,10 +29,12 @@ export default class CreateUnitBisnis extends Component {
                             <div className="margin-bottom-20px">
                                 <TextField
                                     style={{ width: '100%' }}
-                                    id="periode"
-                                    select
-                                    label="Berlaku Mulai"
-                                    // value={this.state.periode}
+                                    id="id"
+                                    label="ID"
+                                    disabled
+                                    // id="outlined-read-only-input"
+                                    variant="filled"
+                                    value={1}
                                     onChange={(e) => null}
                                 >
                                     {/* {periode.map((option) => (
@@ -45,13 +47,29 @@ export default class CreateUnitBisnis extends Component {
                         </div>
 
                         <div className="column-2">
+                            <div className="margin-bottom-20px">
+                                <TextField
+                                style={{ width: '100%'}}
+                                id="standard-helperText"
+                                label="Helper text"
+                                defaultValue="Default Value"
+                                // helperText="Some important text"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
+                        <div className="column-1">
                             <div className="margin-bottom-20px">
                                 <TextField
                                     style={{ width: '100%' }}
-                                    id="unit"
-                                    select
-                                    label="Unit Bisnis"
-                                    // value={this.state.periode}
+                                    id="id"
+                                    label="ID"
+                                    disabled
+                                    // id="outlined-read-only-input"
+                                    variant="filled"
+                                    value={1}
                                     onChange={(e) => null}
                                 >
                                     {/* {periode.map((option) => (
@@ -63,6 +81,40 @@ export default class CreateUnitBisnis extends Component {
                             </div>
                         </div>
 
+                        <div className="column-2">
+                            <div className="margin-bottom-20px">
+                                <TextField
+                                style={{ width: '100%'}}
+                                id="standard-helperText"
+                                label="Helper text"
+                                defaultValue="Default Value"
+                                // helperText="Some important text"
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
+                        <div className="column-1">
+                            <div className="margin-bottom-20px">
+                                <TextField
+                                    style={{ width: '100%' }}
+                                    id="id"
+                                    label="ID"
+                                    disabled
+                                    // id="outlined-read-only-input"
+                                    variant="filled"
+                                    value={1}
+                                    onChange={(e) => null}
+                                >
+                                    {/* {periode.map((option) => (
+                                        <MenuItem key={option.value} value={option.value}>
+                                            {option.label}
+                                        </MenuItem>
+                                    ))} */}
+                                </TextField>
+                            </div>
+                        </div>
                     </div>
 
                     <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>

src/container/Profile.js

 import React, { Component } from 'react';
 import { Typography, AppBar, Tabs, Tab, TextField } from '@material-ui/core';
 import HomePage from './HomePage';
+import Images from '../assets/Images';
 
 export default class Profile extends Component {
     constructor(props) {
@@ -14,7 +15,7 @@ export default class Profile extends Component {
     }
     render() {
         return (
-            <div style={{ flex: 1}}>
+            <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
                 <div style={{ height: 203, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'flex-end', padding: 20 }}>
                     <div style={{ display: 'flex', alignItems: 'center' }}>
                         <div style={{ height: 72, width: 72, backgroundColor: 'white', borderRadius: 40, marginRight: 20 }} />
@@ -67,9 +68,31 @@ export default class Profile extends Component {
                                 </div>
                             </div>
                         </div> :
-                        <div style={{ padding: 20 }}>
-                            ini tab 1
+                        <div style={{ padding: 20, marginTop: 10, marginBottom: 100 }}>
+                        <div style={{ width: 432, borderRadius: 6, boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.25)' }}>
+                            <div style={{ width: '100%', height: 64, backgroundColor: '#354960', display: 'flex', paddingLeft: 20, borderTopLeftRadius: 6, borderTopRightRadius: 6, alignItems: 'center' }}>
+                                <Typography style={{ fontSize: '13px', color: 'white', fontWeight: 'bold' }}>Otorisasi Perusahaan</Typography>
+                            </div>
+                            <div style={{ padding: 20 }}>
+                                <div style={{ display: 'flex'}}>
+                                    <img src={Images.check} style={{ marginRight: 10}}/>
+                                    <Typography style={{fontSize: 14, opacity: .5, color: '#4b4b4b'}}>Agro PersadaTriputra </Typography>
+                                </div>
+                                <div style={{ display: 'flex', marginTop: 20}}>
+                                    <img src={Images.check} style={{ marginRight: 10}}/>
+                                    <Typography style={{fontSize: 14, opacity: .5, color: '#4b4b4b'}}>Dharma Group</Typography>
+                                </div>
+                                <div style={{ display: 'flex', marginTop: 20, paddingLeft: 20}}>
+                                    <img src={Images.check} style={{ marginRight: 10}}/>
+                                    <Typography style={{fontSize: 14, opacity: .5, color: '#4b4b4b'}}>Dharma Polimetal</Typography>
+                                </div>
+                                <div style={{ display: 'flex', marginTop: 20, paddingLeft: 20}}>
+                                    <img src={Images.check} style={{ marginRight: 10}}/>
+                                    <Typography style={{fontSize: 14, opacity: .5, color: '#4b4b4b'}}>Dharma Poliplast</Typography>
+                                </div>
+                            </div>
                         </div>
+                    </div>
                     }
                 </div>
             </div>

src/library/Constant.js

 const Constant = {
-    TOKEN: 'TOKEN',
+    TOKEN: null,
     USER: null,
 }
 

src/library/Utils.js

+export function titleCase(text) {
+	var value = String(text).replace(/\./g, ' ')
+		.replace(/\s/g, ' ')
+		.replace(/^(.)/, function($1) { return $1.toUpperCase(); })
+		// .replace(/\s(.)/g, function($1) { return $1.toUpperCase(); })
+
+	return value
+}
\ No newline at end of file

src/router/index.js

@@ -26,7 +26,7 @@ import Constant from "../library/Constant";
 
 export default function BasicExample() {
   return (
-    <Router>
+    <Router basename={"/tia-web"}>
       <Switch>
         <Route exact path="/">
           <Redirect
@@ -55,7 +55,7 @@ export default function BasicExample() {
 }
 
 function PrivateRoute({ children, ...rest }) {
-  const logged = localStorage.getItem(Constant.TOKEN) == 'TOKEN'? false : true
+  const logged = localStorage.getItem(Constant.TOKEN) !== null? true : false
   return (
     <Route
       {...rest}