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

package.json

@@ -12,6 +12,7 @@
     "font-awesome": "^4.7.0",
     "mui-datatables": "^3.3.1",
     "react": "^16.13.1",
+    "react-d3-donut": "^1.1.2",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"

src/assets/Images.js

@@ -17,6 +17,8 @@ const Images = {
     imageLogin: require('./image.svg'),
     email: require('./email.svg'),
     key: require('./key.svg'),
+    green: require('./green.svg'),
+    red: require('./red.svg'),
 
     //Image
     triputra: require('./triputra.png'),

src/assets/green.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H16V16H0z" transform="matrix(1 0 0 -1 -3 13)"/>
+        <g stroke="#4CAF50" stroke-linecap="round">
+            <path stroke-linejoin="round" d="M8 7.243L2 7.243 2 1.243" transform="matrix(1 0 0 -1 -3 13) translate(3 3.757) rotate(-45 5 4.243)"/>
+            <path d="M5 8.485L5 0" transform="matrix(1 0 0 -1 -3 13) translate(3 3.757)"/>
+        </g>
+    </g>
+</svg>

src/assets/red.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0H16V16H0z" transform="translate(-3 -3)"/>
+        <g stroke="#F65A4C" stroke-linecap="round">
+            <path stroke-linejoin="round" d="M8 7.243L2 7.243 2 1.243" transform="translate(-3 -3) translate(3 3.757) rotate(-45 5 4.243)"/>
+            <path d="M5 8.485L5 0" transform="translate(-3 -3) translate(3 3.757)"/>
+        </g>
+    </g>
+</svg>

src/container/Home.js

@@ -10,6 +10,8 @@ import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
+import ExpandMore from '@material-ui/icons/ExpandMore'
+import ExpandLess from '@material-ui/icons/ExpandLess'
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ListItem from '@material-ui/core/ListItem';
@@ -17,6 +19,7 @@ import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import MailIcon from '@material-ui/icons/Mail';
+import Collapse from '@material-ui/core/Collapse';
 
 import {
   BrowserRouter as Router,
@@ -31,6 +34,7 @@ import { FadeMenu, Footer } from '../Utils/Index';
 import Beranda from './Beranda';
 import { Avatar } from '@material-ui/core';
 import HomeRoutes from '../router/homeRoutes'
+import ArraySide from '../library/Array'
 
 const drawerWidth = 307;
 
@@ -114,7 +118,11 @@ export default function MiniDrawer() {
   const classes = useStyles();
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
+  const [selectedIndex, setSelectedIndex] = React.useState([]);
 
+  React.useEffect(() => {
+    // alert(ArraySide)
+  })
   const handleDrawerOpen = () => {
     setOpen(true);
   };
@@ -203,25 +211,52 @@ export default function MiniDrawer() {
             </div>
           </div>
         }
+        {open && 
+          <div style={{marginLeft: 25, marginTop: 20, marginBottom: 20}}>
+            <Typography style={{color: 'white', fontSize: 12}}>APLIKASI</Typography>
+          </div>
+        }
         <List>
-          {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
-        <Divider />
-        <List>
-          {['All mail', 'Trash', 'Spam'].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>{index % 2 === 0 ? <Link to={`${url}/beranda`}><InboxIcon /></Link> : <Link to={`${url}/screen404`}><MailIcon /></Link>}</ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
+          {ArraySide.map((item, index) => (
+              <div>
+                {item.subItem != null? 
+                  <div style={{justifyContent:'space-between', flexDirection: 'row', display: 'flex', paddingRight: 10}} onClick={() => selectedIndex == 0? setSelectedIndex(index) : setSelectedIndex(0)}>
+                    <ListItem button key={item.label}>
+                      <ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
+                      <Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
+                    </ListItem>
+                    {item.subItem != null? (index === selectedIndex? <ExpandMore style={{color:"white", marginLeft: 50, alignSelf:'center'}}/> : <ExpandLess style={{color:"white", marginLeft: 50, alignSelf:'center'}}/>) : null}
+                  </div>
+                :
+                  <Link to={`${url}/${item.path}`}>
+                    <ListItem button key={item.label} onClick={() => setSelectedIndex(index)}>
+                      <ListItemIcon>{index % 2 === 0 ? <InboxIcon style={{color:"white"}}/> : <MailIcon style={{color:"white"}}/>}</ListItemIcon>
+                      <Typography style={{color: 'white', fontSize: 12}}>{item.label}</Typography>
+                    </ListItem>
+                  </Link> 
+                }
+                {item.subItem != null && 
+                <div>
+                  <Collapse in={index === selectedIndex} timeout="auto" unmountOnExit>
+                    <List component="div" disablePadding>
+                      {item.subItem.map((sub, index) => {
+                        return (
+                          <Link to={`${url}/${sub.path}`}>
+                            <ListItem style={{paddingLeft: 70}}>
+                              <Typography style={{color: 'white', fontSize: 12}}>{sub.label}</Typography>
+                            </ListItem>
+                          </Link>
+                        )
+                      })}
+                    </List>
+                  </Collapse>
+                </div>
+                }
+              </div>
           ))}
         </List>
       </Drawer>
-      <div className={classes.content} style={{ height: '100vh', justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
+      <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
         <div>
           <div className={classes.toolbar} />
           <Switch>
@@ -249,20 +284,4 @@ export default function MiniDrawer() {
       </div>
     </div>
   );
-}
-
-function Topic() {
-  // The <Route> that rendered this component has a
-  // path of `/topics/:topicId`. The `:topicId` portion
-  // of the URL indicates a placeholder that we can
-  // get from `useParams()`.
-  let { topicId } = useParams();
-  React.useEffect(() => {
-    alert(topicId)
-  })
-  return (
-    <div>
-      <h3>{topicId}</h3>
-    </div>
-  );
 }
\ No newline at end of file

src/container/HomePage.js

 import React, { Component } from 'react';
 import { Typography, CircularProgress } from '@material-ui/core';
+import MUIDataTable from "mui-datatables";
 import Images from '../assets/Images';
+import DonutChart from 'react-d3-donut';
 
 class HomePage extends Component {
     render() {
@@ -50,10 +52,38 @@ class HomePage extends Component {
             download: false,
             selectableRows: false,
             viewColumns: false,
-            rowsPerPage: 5
+            rowsPerPage: 5,
+            search: false
         }
+        const dataChart = [{
+            count: 90,
+            color: '#5198ea',
+            name: 'My name',
+        }, {
+            count: 10,
+            color: '#ffd600',
+            name: 'name',
+        }]
+        const dataChart2 = [{
+            count: 90,
+            color: '#f65a4c',
+            name: 'My name',
+        }, {
+            count: 10,
+            color: '#5198ea',
+            name: 'name',
+        }]
+        const dataChart3 = [{
+            count: 90,
+            color: '#4caf51',
+            name: 'My name',
+        }, {
+            count: 10,
+            color: '#f65a4c',
+            name: 'name',
+        }]
         return (
-            <div style={{ flex: 1, height: '100vh' }}>
+            <div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
                 <div style={{ height: 78, backgroundColor: '#354960', flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
                     <Typography style={{ fontSize: '24px', color: 'white' }}>Selamat Datang, John!</Typography>
                 </div>
@@ -65,10 +95,141 @@ class HomePage extends Component {
                 </div>
                 <div style={{ flex: 1, padding: 20, width: '100%' }}>
                     <div>
+                        <MUIDataTable
+                            data={data}
+                            columns={columns}
+                            options={options}
+                        />
                     </div>
                     <div style={{ marginTop: 20 }}>
                         <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Status Laporan</Typography>
-                        <CircularProgress variant="static" value={[10,30]} />
+                        <div style={{ marginTop: 10, display: 'flex' }}>
+                            <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' }}>Budget Tahunan - 2021</Typography>
+                                <div style={{ textAlign: 'center' }}>
+                                    <DonutChart
+                                        innerRadius={70}
+                                        outerRadius={100}
+                                        transition={true}
+                                        pieClass="pie1"
+                                        displayTooltip={true}
+                                        strokeWidth={3}
+                                        data={dataChart} />
+                                </div>
+                                <div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.red} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
+                                        </div>
+                                    </div>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.green} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
+                                        </div>
+
+                                    </div>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.green} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <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
+                                        innerRadius={70}
+                                        outerRadius={100}
+                                        transition={true}
+                                        pieClass="pie5"
+                                        displayTooltip={true}
+                                        strokeWidth={3}
+                                        data={dataChart2}
+                                    />
+                                </div>
+                                <div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.red} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
+                                        </div>
+                                    </div>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.green} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
+                                        </div>
+
+                                    </div>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.green} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div style={{ width: 280, height: 400, padding: 20, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4', }}>
+                                <Typography style={{ color: '#4b4b4b', fontSize: '24px', fontWeight: 'bold', height: 71 }}>Lainnya</Typography>
+                                <div style={{ textAlign: 'center' }}>
+                                    <DonutChart
+                                        innerRadius={70}
+                                        outerRadius={100}
+                                        transition={true}
+                                        pieClass="pie2"
+                                        displayTooltip={true}
+                                        strokeWidth={3}
+                                        data={dataChart3}
+                                    />
+                                </div>
+                                <div style={{ display: 'flex', width: '100%', marginTop: 10 }}>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Submit</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>92.8 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.red} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>-0.6%</Typography>
+                                        </div>
+                                    </div>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>On Time</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>6.1 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.green} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.7%</Typography>
+                                        </div>
+
+                                    </div>
+                                    <div style={{ width: '33%' }}>
+                                        <Typography style={{ color: '#656565', fontSize: '15px', textAlign: 'left' }}>Overdue</Typography>
+                                        <Typography style={{ color: '#656565', fontSize: '20px', textAlign: 'left' }}>1.1 %</Typography>
+                                        <div style={{ display: 'flex' }} >
+                                            <img src={Images.green} />
+                                            <Typography style={{ color: '#656565', fontSize: '14px', textAlign: 'left' }}>0.1%</Typography>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+
                     </div>
                 </div>
 
@@ -77,4 +238,4 @@ class HomePage extends Component {
     }
 }
 
-export default HomePage;
\ No newline at end of file
+export default HomePage;

src/container/UserRole.js

+import React, { Component } from 'react';
+
+export default class componentName extends Component {
+  render() {
+    return (
+      <div style={{height: '100vh', width: '100%', flex: 1}}> textInComponent </div>
+    );
+  }
+}

src/index.js

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import '../node_modules/font-awesome/css/font-awesome.min.css'; 
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 

src/library/Array.js

+const arraySide = [
+    {
+        img: '',
+        label: 'Beranda',
+        path: 'beranda',
+        subItem: null
+    },
+    {
+        img: '',
+        label: 'Budget Tahunan',
+        path: 'beranda',
+        subItem: null
+    },
+    {
+        img: '',
+        label: 'Laporan Bulanan',
+        path: 'beranda',
+        subItem: null
+    },
+    {
+        img: '',
+        label: 'Manajemen Dokumen',
+        path: 'beranda',
+        subItem: null
+    },
+    {
+        img: '',
+        label: 'Laporan',
+        path: '',
+        subItem: [
+            {
+                img: 'beranda',
+                label: 'Dashboard CAT',
+                path: 'beranda',
+            },
+            {
+                img: 'beranda',
+                label: 'Report Summary Triputra Group',
+                path: 'beranda',
+            },
+            {
+                img: '',
+                label: 'Report Sub Holding',
+                path: 'beranda',
+            }
+        ]
+    },
+    {
+        img: '',
+        label: 'PENGATURAN',
+        path: 'beranda',
+        subItem: null
+    },
+    {
+        img: '',
+        label: 'Master Data',
+        path: '',
+        subItem: [
+            {
+                img: '',
+                label: 'Unit Bisnis',
+                path: 'beranda',
+            },
+            {
+                img: '',
+                label: 'Perusahaan',
+                path: 'beranda',
+            },
+            {
+                img: '',
+                label: 'Item Laporan',
+                path: 'beranda',
+            },
+            {
+                img: '',
+                label: 'Manajemen Laporan',
+                path: 'beranda',
+            },
+            {
+                img: '',
+                label: 'Parameter Lainnya',
+                path: 'beranda',
+            },
+        ]
+    },
+    {
+        img: '',
+        label: 'Otorisasi',
+        path: '',
+        subItem: [
+            {
+                img: '',
+                label: 'User Role',
+                path: 'userrole',
+            },
+            {
+                img: '',
+                label: 'User',
+                path: 'beranda',
+            }
+        ]
+    },
+    {
+        img: '',
+        label: 'Approvalz Matrix',
+        path: 'beranda',
+        subItem: null
+    }
+]
+
+export default arraySide;
\ No newline at end of file

src/router/homeRoutes.js

 import screen404 from '../container/Screen404'
 import Beranda from '../container/Beranda'
+import UserRole from '../container/UserRole'
 
 const routes = [
     {
       path: "/home/beranda",
-      main: Beranda
+      main: HomePage
     },
     {
-      path: "/home/screen404",
-      main: screen404
+      path: "/home/userrole",
+      main: UserRole
     },
+    
   ];
 
 export default routes;
\ No newline at end of file

src/router/index.js

@@ -36,11 +36,31 @@ export default function BasicExample() {
         <Route path="/login" component={Login} />
         <Route path="/reset" component={ResetPassword} />
         <Route path="/register" component={Register}/>
-        <Route path="/home" component={Home} />
+        <PrivateRoute path="/home" component={Home} />
         <Route path="*">
           <Screen404 />
         </Route>
       </Switch>
     </Router>
   );
+}
+
+function PrivateRoute({ children, ...rest }) {
+  return (
+    <Route
+      {...rest}
+      render={({ location }) =>
+        // fakeAuth.isAuthenticated ? (
+        //   children
+        // ) : (
+          <Redirect
+            to={{
+              pathname: "/login",
+              // state: { from: location }
+            }}
+          />
+        // )
+      }
+    />
+  );
 }
\ No newline at end of file