home ++

src/container/Home.js

@@ -131,19 +131,19 @@ export default function MiniDrawer() {
   const [selectedSubIndex, setSelectSub] = React.useState([]);
   const [userFullname, setUserFullname] = React.useState("")
   const [userEmail, setUserEmail] = React.useState("")
-  
+
   React.useEffect(() => {
-    if(userFullname == "" && userEmail == "") {
+    if (userFullname == "" && userEmail == "") {
       getUserData()
-    } 
+    }
   })
 
   const getUserData = () => {
     let userId = localStorage.getItem(Constant.USER)
     api.create().getDetailUser(userId).then((response) => {
       if (response.data.status == 'success') {
-        setUserFullname(response.data.data.fullname == null? 'Anonym' : response.data.data.fullname)
-        setUserEmail(response.data.data.email == null? 'Anonym@123.xyz' : response.data.data.email)
+        setUserFullname(response.data.data.fullname == null ? 'Anonym' : response.data.data.fullname)
+        setUserEmail(response.data.data.email == null ? 'Anonym@123.xyz' : response.data.data.email)
         console.log(userEmail)
       }
     })
@@ -172,6 +172,11 @@ export default function MiniDrawer() {
     setSelectedIndex(e)
   }
 
+  const logout = () => {  
+    localStorage.removeItem(Constant.TOKEN)
+    window.location.reload();
+  }
+
   let { path, url } = useRouteMatch();
 
   const { height, width } = UseWindowDimensions();
@@ -201,24 +206,23 @@ export default function MiniDrawer() {
       >
         <div className={classes.toolbarDrawer} style={{
           backgroundColor: '#1a2d3e',
-          height: open ? null : 78,
+          height: open ? 203 : 78,
           paddingLeft: open ? null : 55,
           display: open ? null : 'grid',
-          paddingBottom: open ? 55 : null,
-          alignSelf: open? null : 'center'
+          alignSelf: open ? null : 'center'
         }}>
           {open === true ?
 
             <div style={{ display: 'flex', justifyContent: 'space-between', flex: 1, padding: 10 }}>
               <img src={Images.triputra} alt="React Logo" style={{ height: 31, width: 151, alignSelf: 'center' }} />
-              <IconButton onClick={handleDrawerClose} style={{outline: 'none'}}>
+              <IconButton onClick={handleDrawerClose} style={{ outline: 'none' }}>
                 <ChevronLeftIcon style={{ fill: 'white' }} />
               </IconButton>
             </div> :
             <IconButton
               color="inherit"
               aria-label="open drawer"
-              style={{outline: 'none'}}
+              style={{ outline: 'none' }}
               onClick={handleDrawerOpen}
               edge="start"
               className={clsx(classes.menuButton, {
@@ -228,15 +232,15 @@ export default function MiniDrawer() {
               <MenuIcon style={{ fill: 'white' }} />
             </IconButton>}
           {open &&
-            <div style={{ width: '100%' }}>
-              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
-              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10 }}>john@tia.com</Typography>
+            <div style={{ width: '100%', marginTop: 15, marginBottom: 60 }}>
+              <Typography style={{ fontSize: 14, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>{userFullname}</Typography>
+              <Typography style={{ fontSize: 14, color: '#fff', textAlign: 'center', marginTop: 10 }}>{userEmail}</Typography>
             </div>
           }
         </div>
         <Divider />
         {open &&
-          <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -40 }}>
+          <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -45 }}>
             <div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
               <div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
               </div>
@@ -285,7 +289,7 @@ export default function MiniDrawer() {
                       {item.subItem.map((sub, indexs) => {
                         return (
                           <Link to={`${url}/${sub.path}`}>
-                            <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => selectSub(sub.label)}>
+                            <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
                               <ListItem button style={{ paddingLeft: 61 }}>
                                 <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
                               </ListItem>

src/container/HomePage.js

 import React, { Component } from 'react';
-import { Typography, CircularProgress } from '@material-ui/core';
+import { Typography, CircularProgress, MuiThemeProvider, createMuiTheme } from '@material-ui/core';
 import MUIDataTable from "mui-datatables";
 import Images from '../assets/Images';
 import DonutChart from 'react-d3-donut';
 
+var ct = require("../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+
 class HomePage extends Component {
     render() {
         const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
@@ -16,7 +19,8 @@ class HomePage extends Component {
                                 style={{
                                     backgroundColor: 'transparent',
                                     cursor: 'pointer',
-                                    borderColor: 'transparent'
+                                    borderColor: 'transparent',
+                                    marginRight: 10
                                 }}
                                 onClick={() => null}
                             >
@@ -95,11 +99,13 @@ class HomePage extends Component {
                 </div>
                 <div style={{ flex: 1, padding: 20, width: '100%' }}>
                     <div>
-                        <MUIDataTable
-                            data={data}
-                            columns={columns}
-                            options={options}
-                        />
+                        <MuiThemeProvider theme={getMuiTheme()}>
+                            <MUIDataTable
+                                data={data}
+                                columns={columns}
+                                options={options}
+                            />
+                        </MuiThemeProvider>
                     </div>
                     <div style={{ marginTop: 20 }}>
                         <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Status Laporan</Typography>
@@ -145,7 +151,7 @@ class HomePage extends Component {
                                 </div>
                             </div>
 
-                            <div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', marginRight: 25}}>
+                            <div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', marginRight: 25 }}>
                                 <Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold' }}>Laporan Bulanan - Oct 2020</Typography>
                                 <div style={{ textAlign: 'center' }}>
                                     <DonutChart

src/library/Array.js

@@ -71,12 +71,6 @@ const arraySide = [
         path: 'beranda',
         subItem: null
     },
-    {
-        img: '',
-        label: 'Profile',
-        path: 'profile',
-        subItem: null
-    },
     {
         img: Images.masterdata,
         label: 'Master Data',
@@ -126,6 +120,23 @@ const arraySide = [
         label: 'Approval Matrix',
         path: 'approval-matrix',
         subItem: null
+    },
+    {
+        img: Images.otorisasi,
+        label: 'User Management',
+        path: '',
+        subItem: [
+            {
+                img: '',
+                label: 'Profile',
+                path: 'profile',
+            },
+            {
+                img: '',
+                label: 'Logout',
+                path: '',
+            },
+        ]
     }
 ]